如何封装axios请求

为什么要封装?

 封装axios的原因：

简化重复性的代码：在项目里我们都会有统一的baseURL、headers等，而axios提供了拦截器，我们可以在拦截器中对一些相同代码重复性的代码集中管理这样做提高了代码的可读性和维护性。
处理响应的逻辑：可以在请求拦截器或者响应拦截器进行一些逻辑操作，例如后端返回的状态码，我们需要对不同的状态码进行不同的提示语句那么我们可以在响应拦截器中进行一些逻辑操作

怎么进行封装呢?

我们在项目中需要安装axios：

npm install axios

通常情况下，我们的项目中会有一个utils文件夹存放一个request.js (个人写法) 来对axios进行封装，会先创建axios实例配置baseUrl等信息。注意在正式的开发中，我们一般会分为测试环境和生产环境所以baseUrl我们需要根据当前环境来设置，

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

const http = axios.create({
    baseURL:'http://api.com' // 请求后端接口的baseurl
    timeout:100000          // 设置请求的超时时间
})

export default http

创建了一个'http'的axios实例之后我们就封装一下get/post等请求方法

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

const http = axios.create({
    baseURL:'http://api.com' // 请求后端接口的baseurl
    timeout:100000          // 设置请求的超时时间
})

export function get(url,params){
   return http.get(url,{params})
}

export function post(url,data){
   return http.post(url,{data})
}

export default http

接着我们可以使用拦截器来处理请求和响应，比如在请求之前我们需要添加token或者请求头等

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

const http = axios.create({
    baseURL:'http://api.com' // 请求后端接口的baseurl
    timeout:100000          // 设置请求的超时时间
})

// 请求拦截器
http.interceptors.request.use(config=>{
    // 例如
    config.headers.Authorization = `Bearer ${引入token}`
    return config
 },
 err=>{
    return Promise.reject(err)
 })
 
// 响应拦截器
http.interceptors.response.use(response=>{
    return response
 },
 err=>{
    return Promise.reject(err)
 }) 
 

export function get(url,params){
   return http.get(url,{params})
}

export function post(url,data){
   return http.post(url,{data})
}

export default http

封装完之后我们在项目中有一个专门写接口的文件夹api导入我们封装好的http方法 例如要写登录接口

// api/login.js
import http from '@/utils/request

// 登录方法

export function login(url,data){
   return http.post(url,{data})
}

组件中使用

// home.vue

import { login } from '@api/login'

login('/login',{
  username:'cc',
  password:'*****'
})