axios进行二次封装

安装

// 使用node进行引入 
 npm install axios
 // 使用 unpkg CDN 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

封装实例

在项目的src/utils目录下创建request.js的文件夹，在request.js文件中编写axios封装的代码。

// 引入axios
import axios from 'axios'
// 创建axios实例
const service=axios.create({
    //baseUrl表示请求的公共部分
    baseUrl:'http://127.0.0.1:8888/api/',
    //设置请求超时时间
    timeout:3000
    // 其他的一些配置信息
})

请求拦截器

 // 添加请求拦截器
 service.interceptors.request.use((config)=>{
     // 配置请求头，设置语言为简体中文 
     config.headers.lang = 'zh-CN'
     // 配置token
     config.headers['Authorization'] = token.getToken()
     // 其他的配置或处理
     return config
 }),error=>{
     console.log('请求拦截器错误',error)
     // 请求错误处理
 }

响应拦截器

// 添加相应拦截器
service.interceptors.response.use((response)=>{
    // 如果响应状态码为200，直接返回数据 
    if (response.status === 200){ 
        return response.data
    } else {
        // 如果响应状态码不为200，抛出错误 
        throw new Error('请求失败') 
    }
}),error=>{
    // 对错误进行统一的处理
    if(error.response){
        // 如果有响应错误信息，抛出错误
        throw new Error(error.response.data)
    }else{
        // 如果没有响应错误信息，抛出默认错误
        throw new Error('网络错误，请稍后重试')
    }
}

导出封装好的axios实例

// 导出
export default service

使用封装好的实例

// 引入axios实例
import request from '@/utils/request'
// 使用
export function getUserInfo(data){
    return request({
        url:'user/getUserInfo', // 后端接口的地址
        method:'post', // 请求方式
        data // 请求数据
    })
}