axios使用及封装（vue）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

安装

npm install axios

使用

axios({
  url: '...',//请求地址
  method: '...',//请求类型
  params: {//URL查询对象
    type: '...',
    size: '...'
  }
}).then(res => {
  console.log(res);
})

配置信息

请求地址

• url: '/user',

请求类型

• method: 'get',

请求根路径

• baseURL: 'http://www.mt.com/api',

请求前的数据处理

• transformRequest:[function(data){}],

请求后的数据处理

• transformResponse: [function(data){}],

自定义的请求头

• headers:{'x-Requested-With':'XMLHttpRequest'},

URL查询对象

• params:{ id: 12 },

查询对象序列化函数

• paramsSerializer: function(params){ }

request body

• data: { key: 'aa'},

超时设置s

• timeout: 1000,

跨域是否带Token

• withCredentials: false,

自定义请求处理

• adapter: function(resolve, reject, config){},

身份验证信息

• auth: { uname: '', pwd: '12'},

响应的数据格式 json / blob /document /arraybuffer / text / stream

• responseType: 'json',

封装

创建axios实例

为什么要创建axios的实例呢?

• 当我们从axios模块中导入对象时, 使用的实例是默认的实例.
• 当给该实例设置一些默认配置时, 这些配置就被固定下来了.
• 但是后续开发中, 某些配置可能会不太一样.
• 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
• 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

import axios from 'axios'
export function requst(config) {
  const instance = axios.create({
    baseURL: 'https://...',
    timeout: 5000
  })

  instance.interceptors.request.use(config => {
    console.log(config);//请求拦截
    //1.config中的一些信息不符合服务器的需求
    //2.每次发送网络请求时希望在页面中显示一个请求的图标
    //3.某些网络请求(比如登录(token))需要携带一些特殊的信息
    return config
  }, err => {
    console.log(err);
  })

  instance.interceptors.response.use(res => {
    console.log(res);//响应拦截
    return res.data//返回服务器传来的
  }, err => {
    console.log(err);
  })

  return instance(config)
}

//main.js
import {
  requst
} from './...'//封装的axios路径
requst({
  url: '...'//请求路径
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

参考

• coderwhy老师vue2视频

愿世俗多点温柔，愿你少点难过