使用axios封装api

使用axios封装api(vue2和vue3都可)

	在一般情况下使用axios调用接口的时候，总是路径和参数写一堆，今天
我们来看看如何去封装并且并使用api。

1.在我们的vue项目中下载axios安装包，这里就不详细说了。
2.在我们的utils文件夹下，新创建一个request.js文件。

3.编写代码

import axios from 'axios' // 引用axios
// 创建axios对象
const service = axios.create({
  baseURL: 'http://xxxxx', // 请求接口的域名
  timeout: 9000 // 请求的超时
})

// 添加请求拦截器,
service.interceptors.request.use(
  request => {
    // 设置请求的头信息
    request.headers = {
      token: ``, // 请求添加的token（此处也可不写）
    }
    return request
  },
  error => {
    Promise.reject(error)
  }
)

// 添加响应拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    Promise.reject(error)
  }
)

export default service

4.此时只是完成了axios封装，我们下来完成api的封装，在src目录下新建一个api文件，里面在新建一个自己随便命名的js文件。

我自己写的是brand文件。
5.下来写brand js文件里的内容，此时可以按照自己项目的分类和模块创建多个文件进行封装。

import request from '@/utils/request' //引入刚刚写好的request文件
// 品牌列表
export function fetchList(params) {
  return request({
    url:'ordinarymall/getallbrandinfo', //接口路径
    method:'get', //请求方式
    params:params //需要传的参数
  })
}

6.这是封装其中一个，咱们再看接下来页面如何使用

先在自己需要调用接口的页面引入刚刚封装的api文件，在methods里面写入下面的方法。

 //列表
    getList() { //自己定义的函数名
      fetchList(this.listQuery).then((response) => {//刚刚在api里定义的函数名fetchList
      //this.listQuery是我需要传的参数，如果没有的话可不写
        this.list = response.data.rows;
        //将后面的接口数据赋值到我们需要的参数上
      });
    },

最后一步，调用这个方法，一般列表的话，都是初始化调用，所以

 created() {
    this.getList();//调用刚刚写好的方法
  },

至此，一个查询列表的接口就封装调用好了，如果有其他的接口，也和这个封装的一模一样，也就是在api里在定义一个函数，把路径和参数都改一下就可以啦。