vue项目axios的使用与简单封装

1.前言

       有朋友刚刚毕业项目经验不多，总是错误的使用axios来发送请求，整天在公司问东问西导致项目进度缓慢，所以这里把我自己的项目中使用的axios封装拿出来分享一下。

2.安装axios以及基本使用

// 安装
npm install axios -s 

// 引入
import axios from 'axios'

// 使用
axios({
  method: "GET",
  url: "http://localhost:3000/api/getData"
}).then(response => {
  console.log(response);
})

axios({
  method: "POST",
  url: "http://localhost:3000/api/postData",
  data:{name:"xiaoming",age:18,params:"提交的数据。。。"}
}).then(response => {
  console.log(response);
})

上面简单的展示了如何使用get来获取数据以及通过post来提交数据，当然，put，delete也是一样的，就不过多展示了。axios直接返回一个promise，所以可以直接在then里面接收到由后端服务返回的数据，下面展示的就是response对象的具体各项参数。

 3.对axios进行封装

        封装的本质就是为了减少代码重复书写，将可以复用的部分抽取出来，而axios的封装就是基于interceptors拦截器来进行的，对请求以及响应做相应的操作

请求拦截器，就是在请求发送之前对做一些统一处理比如对请求头做一些操作，对不同的方法进行不同的处理等等

// request拦截器
service.interceptors.request.use(
  (config) => {
    // config.headers["Sec-Fetch-Dest"] = "image"
    // JWT鉴权处理
    if (store.getters['user/token']) {
      config.headers['Token'] = store.state.user.token
    }
    // 处理get请求
    if (config.method=='get') {
      // 在这里对get请求进行包装，比如传参数，比如参数加密或者携带默认参数
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

响应拦截器，就是对请求发送成功之后服务器的响应体做一定的操作，这里的代码主要是对各种的状态进行统一处理

// response拦截器
service.interceptors.response.use(
  (response) => {
    if (response.status == 200) {
      const res = response.data
      if (res.code == 200) {
        return res
      } else if (res.code == 401 || res.code == 403) {
        store.dispatch('user/loginOut')
        showError(res)
        return Promise.reject(res)
      }else {
        showError(res)
        return Promise.reject(res)
      }
    } else {
      ElMessage({
        message: '网络连接失败,请检查网络情况',
        type: 'error',
      })
      return Promise.reject(res)
    }
  },
  (error) => {
    const badMessage = error.message || error
    showError({ code:999, message: badMessage })
    return Promise.reject(error)
  }
)

然后项目中再将所有的api集中到一个地方进行管理，需要使用的时候再引入到页面

import { get, post, del, edit } from "@/utils/system/request"

export const user = {
    list: (data) => get('/sys/user/list', data),
    del: (data) => post('/sys/user/delete', data),
    info: (data) => get('/sys/user/info/' + data),
    save: (data) => post('/sys/user/save', data),
    update: (data) => post('/sys/user/update', data),
}

import { user } from "@/api/sys"  
const getUserList = async () => {
      let { code, data } = await user.list()
      userList.value = code == 200 ? data.list : []
}

到这里，就已经成功的完成了一个请求的调用了！