vue如何根据接口文档书写请求接口代码

本文是基于Axios技术发送的请求

一、二次封装axios

当我们的项目配置好axios后，首先对axios进行二次封装，这样一来，不仅最原本的instance没有被污染，也可以更好地满足我们个人的项目需求

axios中文文档：拦截器 | Axios中文文档 | Axios中文网 (axios-http.cn)

const baseURL = 'http://big-event-vue-api-t.itheima.net'
  //此处以黑马程序员的vue3大事件项目的接口文档为例
const instance = axios.create({
  //  1. 基础地址，超时时间
  baseURL,
  timeout: 10000
})

以下拦截器代码可从axios文档中直接复制

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

请求拦截器：发生在发送请求之前，一般用于携带token作为headers请求头

响应拦截器：发生在接收到数据之后，一般用于对状态码进行错误处理或者页面跳转

到此就封装好了Axios请求代码，将其命名为request.js放在utils包下

二、对不同请求参数代码的封装 

1. Header 参数

Header参数一般写在请求拦截器中

config.headers.Authorization = token
//token从本地存储中获取或者状态管理工具中获取

如果有多个请求头，可以写成

config.headers = {
    Authorization : token,
    'Content-Type':'application/json;charset=utf-8'
}

配置好请求头之后，剩下的请求参数不必再考虑请求头 

2. Body 参数 application/json

 

// 更新用户基本信息
export const userUpdateInfoService = ({ id, nickname, email }) =>
  request.put('/my/userinfo', { id, nickname, email })

用户的基本信息通常作为一个对象参数，从中解构出id、nickname、email，调用put方法，第一个参数是接口路径，第二个参数以请求体的方式发送

这种格式通常用PUT、PATCH和POST方法

3.Body 参数multipart/form-data

 4.Query 参数

 

//方法一
//删除文章分类
export const artDelChannelsService = (id) =>
  request.delete('/my/cate/del', {
    params: { id }
  })

一般情况下也可以写成这种形式

//方法二
export const artDelChannelsService = (id) =>
  request.delete(`/my/cate/del?id=${id}`)

这两种方法都是通过url进行传参，axios底层可以使方法一转化为方法二，将参数和url进行拼接传参

三、多种格式传参

有时也会碰上同时以Query 参数和Body 参数同时传参的情况

四、查看网络请求是否正确

如果实在找不到请求错误的原因，可以对比浏览器的请求地址和接口文档测试的地址