axios插件简单的封装和拦截器

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios的特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

下面是一些axios的简单封装方法

axios.creat是什么

axios create(baseURL,timeout)

1. 根据指定配置创建一个新的 axios，也就是每个新 axios都有自己的配置

2. 新 axios只是没有取消请求和批量发请求的方法，其它所有语法都是一政的

3. 为什么要设计这个语法?
   需求:项目中有部分接口需要的配置与另一部分接口需要的配置不太一样，如何处理
   解决:创建2个新axios，每个都有自己特有的配置，分别应用到不同变求的接口请求中

import axios from "axios";//引入下载好的axios插件
// 创建一个新的axios赋值给变量
const instance= axios.create({
  baseURL: "http://localhost:*",//设置这个新的axios请求的时候的IP地址
  timeout: 5000, //设置请求超时的时间
});

这样我们就创建好一个新的axios请求了，接下来我们用这个新的axios封装一下常用的几个请求：

export const get = (url, params) => instance.get(url, params)
// 导出一个封装函数，第一个参数表示请求的地址，第二个传给服务器的数据，箭头函数的写法

export function post(url, data) {
  return instance.post(url, data)
}

// 导出一个封装函数，第一个参数表示请求的地址，第二个传给服务器的数据

export function put(url, data) {
  return instance.put(url, data)
}
// 导出一个封装函数，第一个参数表示请求的地址，第二个传给服务器的数据

// 导出一个封装函数，第一个参数表示请求的地址，第二个传给服务器的数据
export function del(url) {
  return instance.delete(url)
}
// 导出实例
export default instance

这样我们就封装好了请求方式，下面是使用我们刚才封装好的请求:

import { post, get, del, put } from '../request/request'
//我们刚才用export导出了几个函数，
//export当导出多个的时候默认以一个对象的形式进行导出
//这里导入的时候用到了解构赋值,把我们所要用到的结构出来

export function loadCart() {
  return get('/api/v1/product')
}
//用结构出的get然后在进行一个简单的封装，
//这里URL是后端设置的访问的地址，
//刚才我们的baseURL已经设置好我们所访问的IP地址在这里就不用再重复设置了

export function addToCart(body) {
  return post('/api/v1/carts',{body} )
}
//封装post，post一般用来添加数据

export function removeCart(carID) {
  return del('api/v1/carts/' + carID)
}
//封装delete

export function putToRess(_id, params) {
  return put('/api/v1/addresses/' + _id, params)
}
//put 更新

这样基本就封装好了，在写项目的时候我们直接就可以用了

import { loadCart } from '../***'//地址

当我们的ip地址所改变时，只需要修改baseURL即可

axios拦截

在客户浏览服务器的时候，难免会出现一些错误，当发生错误时，我们要根据对应的错误代码来采取一系列措施。比如常见的:

• 400：错误的请求
• 401：访问被拒绝
• 403：禁止访问
• 404：未找到
• 405：用来访问页面的方法不被允许

这样我们就要用到axios的网络拦截，当用到的时候我们可以直接在官网上CV下来直接用就行

注意：这些网络拦截的代码最好写在我们创建实例的下方！

// Interceptors  网络请求
// 全局请求拦截，所有的网络请求之前都会走到这个文件
// Add a request interceptor
instance.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    config.headers.authorization = 'Date ' + new Date()
    //这个是设置自定义请求头的数据
    return config
  },
  function(error) {
    // Do something with request error
    // 当发生错误的时候会走到这里
    return Promise.reject(error)
  }
)

当我们要根据错误代码进行措施的时候在这里设置

// 全局相应拦截，所有的网络请求返回之后都会走这里
// Add a response interceptor
instance.interceptors.response.use(
  function(response) {
    // response 返回的结果
    return response.data
  },
  function(error) {
    // 账号过期时间，，401未授权
    //error.response.status 错误代码会在这里
    if (error.response.status === 401) {
      // alert('账号已过期请重新登录')
      window.location.href = '/#/**'
      //当401的时候，做的事情在这里写
    }
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error)
  }
)