本文共 3498 字，大约阅读时间需要 11 分钟。

基本介绍

Axios是一个异步的http框架，可以在浏览器和nodejs中使用

特征

从浏览器中创建 XMLHttpRequests

全局方法

axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])

实例方法

axios#request(config)axios#get(url[, config])axios#delete(url[, config])axios#head(url[, config])axios#post(url[, data[, config]])axios#put(url[, data[, config]])axios#patch(url[, data[, config]])

实例创建

axios.create([config])

// 创建axios实例const service = axios.create({
     baseURL: process.env.NODE_ENV === 'production' ?    process.env.VUE_APP_BASE_API : '/', // api 的 base_url  timeout: Config.timeout // 请求超时时间})

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// request拦截器service.interceptors.request.use(  config => {
       //此处主要处理发送之前又处理的逻辑    if (getToken()) {
         config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改    }    config.headers['Content-Type'] = 'application/json'    return config  },  //请求错误怎么处理  error => {
       // Do something with request error    console.log(error) // for debug    Promise.reject(error)  })

// response 拦截器service.interceptors.response.use(  response => {
       //收到响应数据之后具体要做些什么    const code = response.status    if (code < 200 || code > 300) {
         Notification.error({
           title: response.message      })      return Promise.reject('error')    } else {
         return response.data    }  },  error => {
       //响应错误的情况下具体要做哪些事情    let code = 0    try {
         code = error.response.data.status    } catch (e) {
         if (error.toString().indexOf('Error: timeout') !== -1) {
           Notification.error({
             title: '网络请求超时',          duration: 5000        })        return Promise.reject(error)      }    }    if (code) {
         if (code === 401) {
           MessageBox.confirm(          '登录状态已过期，您可以继续留在该页面，或者重新登录',          '系统提示',          {
               confirmButtonText: '重新登录',            cancelButtonText: '取消',            type: 'warning'          }        ).then(() => {
             store.dispatch('LogOut').then(() => {
               location.reload() // 为了重新实例化vue-router对象 避免bug          })        })      } else if (code === 403) {
           router.push({
    path: '/401' })      } else {
           const errorMsg = error.response.data.message        if (errorMsg !== undefined) {
             Notification.error({
               title: errorMsg,            duration: 5000          })        }      }    } else {
         Notification.error({
           title: '接口请求失败',        duration: 5000      })    }    return Promise.reject(error)  })

config常用参数

Axios为什么需要定义实例呢？

由于Axios对所有的http请求都支持了静态方法，那我们为什么还需要实例呢？

参考文档

转载地址：https://blog.csdn.net/qinwuxian19891211/article/details/105938545 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！