Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

安装

 npm install axios

创建实例

axios.create({
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
  // `timeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)
  // 自定义请求头
  headers: {'X-Custom-Header': 'foobar'}
})

// 给axios设置一些默认行为
switch (process.env.NODE_ENV) {
  case 'production':
    axios.defaults.baseURL = 'http://47.96.0.211:3001/admin';
    break;
  case 'development':
    axios.defaults.baseURL = 'http://47.96.0.211:3001/admin';
    break;
}

// 设置超时时间
axios.defaults.timeout = 5000;
// 设置跨域是否需要携带凭证
axios.defaults.withCredentials = false

发起请求

导入axios

import axios from 'axios'

get请求

axios.get(url,{
  params:{
    // k:v
  },
  headers:{
    // k:v
  }
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
}).finally(()=>{
   // 总是会执行
})

post请求

axios.post(url,{
  data:{
    // k:v
  },
  headers:{
    // k:v
  }
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
}).finally(()=>{
   // 总是会执行
})

async/await写法

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 GET 方法。

拦截器

请求拦截

axios.interceptors.request.use(config=>{
  // 需要再请求头上面统一携带token给后端传递
  const token = localStorage.getItem('token')
  if(token) config.headers.token = token
  return config
})

响应拦截

axios.interceptors.response.use(response=>{
  // 将后端返回的token令牌存储到本地中
  if(response.data?.data?.token) {
    localStorage.setItem('token', response.data.data.token)
  }

  // 如果token失效了，需要跳转到登录页。"code": "10119"
  if(response.data.code === '10119'){
    localStorage.removeItem('token')
    router.push('/login')
  }

  ElMessage({ // 不需要引入，自动就可以使用了
    message: response?.data?.message,
    type: response.data.code === '200' ? 'success' : 'error',
  })
  return response.data
})

封装请求头

import axios from "axios";
import { message } from 'antd';
// 创建axios实例对象
const instance = axios.create({
    // 判断环境变量是否为开发环境
    baseURL: process.env.NODE_ENV === 'development' ? 'http://47.96.0.211:3001/admin' : 'http://47.96.0.211:3001/admin'
})
// 请求拦截器
instance.interceptors.request.use(config => {


    return config
})
// 响应拦截器
instance.interceptors.response.use(response => {
    message.open({
        type: response.data.code === '200' ? 'success' : 'error',
        content: response.data.message
    })
    return response
})


// 后续借助这个request请求实现get/post相关的接口调用
export default function request(config) {
    const { url = '', method = 'GET', data = {}, headers = {} } = config
    switch (method.toUpperCase()) {
        case 'GET':
            return instance.get(url, { params: data })
        case 'POST':
            // 如果是表单提交
            if (headers['content-type'] === 'application/x-www-form-url-encoded') {
                const p = new URLSearchParams()
                for (const key in data) {
                    p.append(key, data[key])
                }
                return instance.post(url, p, { headers })
            }
            // 如果是文件提交
            if (headers['content-type'] === 'multipart/form-data') {
                const p = new FormData()
                for (const key in data) {
                    p.append(key, data[key])
                }
                return instance.post(url, p, { headers })
            }
            // 否则就是 application/json的形式
            return instance.post(url, data)
        default:
            return instance(config)
    }
}

axios常用记录

安装