axios 模块化封装_对axios的二次封装的实现

更新日期: 2018-12-03阅读量: 4776标签: http

Axios 是一个基于 promise 的 HTTP 库 ,使用了axios来进行数据的请求,一般都需要我们对它进行封装处理。


Axios封装

let service=axios.create({
    baseURL:'',
    timeout:5000,
    headers:{
      'content-type':'application/x-www-form-urlencoded'//转换为key=value的格式必须增加content-type
    },
})
let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;

//http-请求拦截
service.interceptors.request.use(
  config => {
    if (promiseArr[config.url]) {//发起请求时,取消掉当前正在进行的相同请求
        promiseArr[config.url]('操作取消')
        promiseArr[config.url] = cancel
    }else{
        promiseArr[config.url] = cancel
    }
    return config
  },
  error => {
    return Promise.reject(err)
  }
);

//http-响应拦截
service.interceptors.response.use(
  response => {
  	if(response.data.code ==2){//返回code码为2的时候,代表登录失效
  		location.href="/login"
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)

export default {
    get(url,param){//get请求
      return new Promise((resolve,reject) => {
        service({
          method: 'get',
          url,
          params: param,
          cancelToken: new CancelToken(c => { cancel = c })
        }).then(res => {
          resolve(res)
        })
      })
    },
    post(url,param){//post请求
      return new Promise((resolve,reject) => {
        service({
          method: 'post',
          url,
          data: param,
          cancelToken: new CancelToken(c => {cancel = c })
        }).then(res => {
          resolve(res)
        })
      })
    }
}


vue中使用:

在main.js文件下:

import {post,get} from './lib/http'//请求

//定义全局变量 
vue.prototype.$post=post; 
Vue.prototype.$get=get;

这样基本的功能就有了,然后在页面上使用this.$post、this.$get来调用。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1484

HTTP缓存总结

web缓存是指一个web资源(如html页面,图片,js,数据等)存在于web服务器和客户端(浏览器)之间的副本。缓存会根据进来的请求保存输出内容的副本;当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求

HTTP请求头和响应头部包括的信息有哪些【HTTP请求头各字段解释】

每个HTTP请求和响应都会带有相应的头部信息。默认情况下,在发送XHR请求的同时,还会发送下列头部信息: Accept、Accept-Charset、Accept-Encoding、Connection、Host

HTTP协议中的短轮询、长轮询、长连接和短连接

HTTP协议是基于请求/响应模式的,因此只要服务端给了响应,本次HTTP连接就结束了,根本没有长连接这一说。网络上说HTTP分为长连接和短连接,其实本质上是说的TCP连接。TCP连接是一个双向的通道,它是可以保持一段时间不关闭的,因此TCP连接才有真正的长连接和短连接这一说。

HTTP缓存总结(浏览器缓存)

缓存减少了冗余的数据传输,节省了你的网络费用,缓存缓解了网络瓶颈的问题,不需要更多的带宽就能够更快地加载页面,缓存降低了对原始服务器的要求,服务器可以更快地响应,避免过载的出现

http和https有什么区别?网站有没有必要启用https

最近在浏览文章的时候发现,很多站长都在纠结网站到底要不要做https的问题。作为个人站长,也一直关注着这块。最近查阅了很多资料,对https也有了更进一步的认识,这里对https的有关问题做了一个总结,希望对大家能够有帮助。

Nginx http资源请求限制

前置条件:nginx 需要有 ngx_http_limit_conn_module 和 ngx_http_limit_req_module 模块,如果没有请重新编译安装这两个模块。使用 limit_conn_zone 指令定义密钥并设置共享内存区域的参数

HTTPS 如何保证数据传输的安全性

在客户端与服务器数据传输的过程中,HTTP协议的传输是不安全的,也就是一般情况下HTTP是明文传输的。但HTTPS协议的数据传输是安全的,也就是说HTTPS数据的传输是经过加密的

HTTP Content-type

Content-Type(内容类型),一般是指网页中存在的 Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式、什么编码读取这个文件

http中Referer和Referrer Policy

referer:引用页。HTTP请求头信息中,referer用于提供访问来源的信息,客户端发送请求的时候,自主决定是否加上该字段。服务器一般使用referer识别访问来源,可能以此进行统计分析、日志记录以及缓存优化等

HttpClient的3种超时

设置ConnectionPoolTimeout:这定义了从ConnectionManager管理的连接池中取出连接的超时时间,此处设置为1秒。设置ConnectionTimeout:这定义了通过网络与服务器建立连接的超时时间。Httpclient包中通过一个异步线程去创建与服务器的socket连接

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!