首页 前端知识 Vue实现封装axios,配置get,post,put等多种请求方式,并且实现全局接口调用

Vue实现封装axios,配置get,post,put等多种请求方式,并且实现全局接口调用

2024-09-14 23:09:13 前端知识 前端哥 832 49 我要收藏

前言:鄙人前端开发三年,做了不少项目了,我发现我参与的大部分项目没有对请求接口参数这块进行配置,每次请求接口都得引入文件,挨个配置参数等,感觉太繁琐了,后面我就自己配置了下,在这做个记录,也给大伙分享一下。

1.我们在src文件夹下,创建一个名为“commom”文件夹,再在该文件夹下创建三个js文件,分别为api.js(该文件写我们的接口),http.js(该文件配置请求方式post,get,put等),common.js(该文件写添加全局属性或方法)。

2.在http.js文件中,我们可以这样配置:

//http.js文件
import axios from 'axios'
import api from "./api";
import Message from 'element-ui';
// 数据引入
let instance = axios.create({
  timeout: 20000
  // withCredentials: true,//跨域请求时是否携带凭证信息(如cookies和HTTP认证信息)。这个选项的默认值是false。
})

//配置请求时的拦截器
instance.interceptors.request.use(
  config=> {
   //该处写我们的逻辑代码...
  }
)

//配置响应时的拦截器
instance.interceptors.response.use(
  response => {
    //比如约定code === 1417时, token 过期,code为1001时,登录失效。
    if (response.data.code === 1417) {

       //此处写我们的逻辑代码....

    } else if (response.data.code === 1001) {
      Message.error('登录信息已过期,请重新登录')
      window.sessionStorage.clear();

     //重新登录
      window.location.href = "http://xxxx.xx.login";
    }
    return response && response
  }
)
//下面为配置我们的请求方式,post,get,put,等
export default {
  post(url, data, params) {
    return instance({
      headers: {
        'token': sessionStorage.getItem('token'),
        'Content-Type': 'application/json'
      },
      method: 'post', // 请求协议
      url: url, // 请求的地址
      data: JSON.stringify(data), // post请求的数据
      params,
      timeout: 30000 // 超时时间,单位毫秒
    }).then(
      (res) => {
        return res.data
      }
    )
  },
  get(url, params) {
    return instance({
      headers: {
        'token': sessionStorage.getItem('token')
      },
      method: 'get',
      url: url,
      params, // get请求时带的参数
      timeout: 30000
    }).then(
      (res) => {
        return res.data
      }
    )
  },
  put(url, data, params) {
    return instance({
      headers: {
        'token': sessionStorage.getItem('token'),
        'Content-Type': 'application/json'
      },
      method: 'put', // 请求协议
      url: url, // 请求的地址
      data: JSON.stringify(data), // post请求的数据
      params,
      timeout: 30000 // 超时时间,单位毫秒
    }).then(
      (res) => {
        return res.data
      }
    )
  },
//删除
  del(url, params) {
    return instance({
      // headers: {
      //     'token': sessionStorage.getItem('token')
      // },
      method: 'delete', // 请求协议
      url: url, // 请求的地址
      params,
      timeout: 30000 // 超时时间,单位毫秒
    }).then(
      (res) => {
        return res.data
      }
    )
  },
//下载
  download(url, params) {
    return axios.get(url, {
      params,
      headers: {
        token: sessionStorage.getItem("token")
      },
      responseType: 'blob'
    }
      //请求头配置
    );
  },
//自定义请求方式,该处为获取token,不带header参数的get请求,可自行配置。
  getToken(url, params) {
    return instance({
      method: 'get',
      url: url,
      params, // get请求时带的参数
      timeout: 30000
    }).then(
      (res) => {
        return res.data
      }
    )
  },
}

 3.在api.js文件中,我们可以这样写:

//api.js文件
//当我们切换地址时,则需要在正式、测试环境地址切换即可,打包发布也一样在此处切换接口环境。
//如下面登录接口中“/login”即为后端给的接口字段,安装此格式依次添加即可。
//post,get,del等,则为我们刚刚配置的请求方式,

import $http from './http';

//测试环境地址:
let BASE_URL = 'http://xxx.test.xx';

//正式环境地址:
//let BASE_URL = "https://xxxx.xx"

//下面接口配置举例
export default {
  BASE_URL: BASE_URL,
  // 登录
  login: (params) => $http.post(`${BASE_URL}/login`, params),
  //获取表格接口数据
  tabledata:(params) => $http.get(`${BASE_URL}/user/all`, params),
  //编辑用户信息
  editperson:(params) => $http.put(`${BASE_URL}/user/editperson`, params),
  //删除用户
  delperson:(params) => $http.del(`${BASE_URL}/user/delperson`, params),
  //添加用户
  addperson:(params) => $http.post(`${BASE_URL}/user/addperson`, params),
  //查询职位
  getRoleList:(params) => $http.get(`${BASE_URL}/role/all`, params),
};

 3.在common.js文件中,我们可以这样配置:

//common.js文件
import axios from 'axios';
import urlApi from './api';
import httpAxios from './http';

//现在我们目标是要全局调用接口,就在Vue原型上添加属性:

export default {
    install(Vue) {
        Vue.prototype.$axios = axios;
        Vue.prototype.$urlApi = urlApi;
        Vue.prototype.$http = httpAxios;
    }
}

4.在入口文件main.js中,我们可以这样配置:

(1)引入common文件夹(对应你的文件路径)

(2)使用Vue.use()即可。

5.全局调用接口:

现在,我们在该项目的任何.vue文件里,都可以使用“ this.$urlApi.接口名 ”调用接口。

举个例子,我们在login.vue里面,直接调用登录接口,如下图:

这样配置好后,我们再也不用每次调接口的时候,都得import一下,而且每个接口都写一坨配置信息啦!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18334.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!