欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 封装 axios HTTP通用请求

程序员文章站 2022-07-02 12:30:32
...

在网上搜了好多关于 axios 的封装,发现他们均无法使用,通用型不太好。

## 第一步 安装 axios

## 第二步 创建 HttpService.js

在 src > api 目录下 创建 HttpService.js,具体内容见下

import axios from 'axios'import router from '../router/router'axios.defaults.timeout = 5000// 配置默认 urlaxios.defaults.baseURL = 'https://www.easy-mock.com/mock/5bd05256e11dd958b534cf2a'axios.defaults.withCredentials = true// http request 拦截器axios.interceptors.request.use(  config => {    config.data = JSON.stringify(config.data)    config.headers = {      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'   }   return config  },  error => {     return Promise.reject(error)  })// http response 拦截器axios.interceptors.response.use(  response => {    if (response.data.code === '404') {      router.push({        path: '/login',          querry: { redirect: router.currentRoute.fullPath } // 从哪个页面跳转     })    }    return Promise.resolve(response)  },  error => {    return Promise.reject(error)  })/**** 封装 HTTP 请求* @param url* @param data* @return {Promise}*/function apiAxios (method, url, params) {  return new Promise((resolve, reject) => {    axios({      method: method,      url: url,      data: method === 'POST' || method === 'PUT' ? params : null,      params: method === 'GET' || method === 'DELETE' ? params : null  }).then(function (res) {    resolve(res)  }).then(function (err) {    reject(err)  })  })}export default {  get: function (url, params) {    return apiAxios('GET', url, params)  },  post: function (url, params) {    return apiAxios('POST', url, params)  },  put: function (url, params) {    return apiAxios('PUT', url, params)  },  delete: function (url, params) {    return apiAxios('DELETE', url, params)  }}复制代码

## 第三步 在main.js,引入 HttpService.js


import Api from './lib/HttpService'// 定义全局变量,封装 http 请求Vue.prototype.$api = Api复制代码


## 第四步, 在任意组件中使用


methods: {getPublicDocumentList () {  var _thi = this;  this.$api.get('/api/v1/file/list',{page: 1,size: 200}).then(    (response) => {      console.log(response.data);    })  }}created: function () {  // 页面加载后,调用(详见vue生命周期钩子)  this.getPublicDocumentList()},复制代码


错误之处,欢迎指正。


详见源码