你可能不知道的axios运用

axios从出现到现在越来越火，几乎已经覆盖到了前端绝大部分。所以axios必须全部掌握。最近梳理了一下axios中可能不被开发者熟悉的一些知识点，查缺补漏，一起进步。

一、axios全局配置

请求地址

在只需要配置单个或有限明确的接口域名时可以直接设置，在生产环境和开发环境切换时需手动更改

axios.defaults.baseURL="http://location:9999/api";

超时设定(1000=1s)

axios.defaults.timeout = 1000

二、拦截器

axios提供了两大类拦截器。
一种是请求方向的拦截（成功 or 失败）
另一种是响应方向的（成功 or 失败）

拦截器的作用：主要用于在网络请求的时候发起请求或者相应时对操作进行相应处理
发起请求时可以添加网页加载的动画，认证token时强制登陆
响应的时候进行相应的数据处理

请求方向拦截器

    
axios.interceptors.request.use(config => {
    console.log("进入请求拦截器");
    console.log(config);
    //拦截器放行
    return config
}, err => {
    console.log("请求失败");
    console.log(err);
})

axios.get("https://s.search.bilibili.com/main/hotword?mid=&buvid=233C35D5-EFCF-429B-8461-983C2A05C99940777infoc").then(res => {
    console.log(res);
})

响应方向拦截器

    
axios.interceptors.response.use(config => {
    console.log("进入响应拦截器");
    return config.data //放行
}, err => {
    console.log("响应方向失败");
    console.log(err);
})

axios.get("https://s.search.bilibili.com/main/hotword?mid=&buvid=233C35D5-EFCF-429B-8461-983C2A05C99940777infoc").then(res => {
    console.log(res);
})

在拦截器放行前我们可以操作或者网页加载的动画，认证token时强制登陆

三、axios在vue中的模块封装

第一种封装


//封装位置：新建目录和文件  ./network/request.js
import axios from 'axios'

export function request(config){
    axios.defaults.baseURL = 'http://localhost:9999/api'
    axios(config.url)
    .then(res=>{
        config.success(res);
    }).cath(err=>{
        config.fail(err);
    })
}

//调用者位置
import {request} from './network/request.js'

request({
    url:'getInfo',
    success:res=>{
        console.log(res)
    },
    fail:err=>{
        console.log(err)
    }
})

第二种封装基于Promise


//封装位置：新建目录和文件  ./network/request.js
import axios from 'axios'

export function request(config){
    let newVar = axios.create({
        baseURL:"http://http://localhost:9999/api",
        timeout:5000
    })
    return newVal(config);
}

//调用者
import {request} from './network/request.js'

request({
    url:'getInfo'
}).then(res=>{
    console.log(res)
})

第三种封装(详细)

//封装位置：新建目录和文件  ./network/request.js
import axios from 'axios'
let baseURL = 'http://http://localhost:9999/api'

export const getRequest = (params) => {
  return axios({
    method: 'get',
    url: `${baseURL}`,
    params: params
  })
}
export const postRequest = (params) => {
  return axios({
    method: 'post',
    url: `${baseURL}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }]
  })
}

export const getDoc = (params) => {
  let token = Cookies.get('token')
  let paramsObj = {
    'token': token,
    'method': 'doc',
    'params': params
  }
  return getRequest({
    'request': JSON.stringify(paramsObj)
  })
}

//调用者
import {getDoc} from './network/request.js'

getDoc({
  //填写参数
  "id":1,
  "subject": "语文",
  "orders": "1"//可选，没有或为0 为顺序排，1为倒序排
}).then(res => {
    console.log(res)
})

最后

作为易用、简洁且高效的http库，并且经常用，但还是有一些细节是我们没注意到的，查漏补缺了解这些细节相信能帮我们写出更好的代码。如果哪里有不对的地方希望留言指正，一起进步！