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

时间: 2018-12-03阅读: 43标签: 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来调用。


http协议的发展历史

在最早的时候,第一个定稿的http协议是http/0.9版本,在这个版本里面,http协议,它的内容,非常非常的简单 只有一个命令。http协议的历史,其中当然还有https,https是http的安全版本,它实际使用的内容跟http/1.1没有很大的区别

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

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

服务器响应常用状态码及含义_ajax请求中http返回的状态码大全

HTTP状态码是用以表示网页服务器HTTP响应状态的3位数字代码,其中第一位数字表示响应类别,响应类别从1到5分为五种,分别代表:临时响应、成功、重定向、请求错误、服务器错误。

JavaScript中fetch接口的用法使用

fetch就是XMLHttpRequest的一种替代方案。如果有人问你,除了Ajax获取后台数据之外,还有没有其他的替代方案?这是你就可以回答,除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案fetch。

Node的https模块_创建HTTPS服务器

Node的https模块:HTTPS服务器使用HTTPS协议,需要证书授权,SSL安全加密后传输,使用443端口

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

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

Fetch -- http请求的另一种姿势

传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据,不注重分离的原则。而Fetch API是基于Promise设计,专为解决XHR问题而出现。fetch API看起来简单,却是js语法不断增强提高带来的改善。

HTTPS 常见部署问题及解决方案

到任何有关部署 HTTPS 或 HTTP/2 的问题,都推荐先用 Qualys SSL Labs SSL Server Test 跑个测试,大部分问题都能被诊断出来。

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

广告合作文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯