axios二次封装

参考官网文档：起步 | Axios中文文档 | Axios中文网

1.安装axios

$ npm install axios

2.在src目录下创建utils/request.js文件

3.引入axios，并创建一个axios实例

import axios from 'axios'

const instance = axios.create({
  // 用于请求的服务器 URL
  baseURL: 'https://some-domain.com/api/',
  // `timeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 10000,
})

4.配置拦截器--注意实例名称一致（我这里的名称是instance）

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前判断是否存在token
    const token = localStorage.getItem('pz_token')
    //不需要添加token的api
    const whiteUrl = ['/login']

    if (token && !whiteUrl.includes(config.url)) {
      config.headers['x-token'] = token
    }
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    //对于接口异常的数据对用户进行提示
    if (response.data.code === -1) {
      ElMessage.warning(response.data.message)
    }
    return response
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

5.不要忘记导出axios实例

export default instance

6.在api文件中统一定义接口，在src目录下创建api/index.js文件

7.引入request文件，并定义接口---根据接口内容定义

/** @format */

import request from '../utils/request.js'

//发送验证码
export const getCode = (data) => {
  return request.post('/get/code', data)
}

8.在代码中调用接口

import { getCode } from '../../api'

//发送验证码
  getCode({ tel: loginForm.userName }).then(({ data }) => {
    console.log('data:', data)
    if (data.code === 10000) {
      ElMessage({
        message: '发送成功',
        type: 'success',
      })
    }
  })

完成✅