vue axios 安装及封装

最新推荐文章于 2024-09-20 14:31:12 发布

TXGadair

最新推荐文章于 2024-09-20 14:31:12 发布

阅读量341

点赞数 1

分类专栏： axios 文章标签： vue.js

本文链接：https://blog.csdn.net/u014748857/article/details/119903455

版权

axios 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中安装和封装axios库，包括环境切换、超时设置、请求头配置、请求拦截器和响应拦截器的实现。同时，展示了如何处理各种错误状态，如401未登录、403登录过期等。最后，封装了get、post、delete、put和patch等HTTP方法，并提供了在页面中调用接口的例子。

摘要由CSDN通过智能技术生成

axios 安装

npm 安装

npm install axios

bower安装

bower install axios

yarn 安装

yarn add axios

.
.
.
项目引入：

main.js

import axios from 'axios'
Vue.prototype.$axios = axios

axios封装：

pages 统计目录下创建目录 request
目录内分别创建 api.js 和 http.js
api.js 用于方法的统一调用
http.js用于axiox 封装

http.js

引入配置：

import axios from 'axios' //引入
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到

// element 的 element ui 提示框组件，大家可根据自己的ui组件更改。
import { element } from 'element ui';

环境的切换：

if (process.env.NODE_ENV == 'development') {
  axios.defaults.baseURL = 'https://www.baidu.com';
} else if (process.env.NODE_ENV == 'debug') {
  axios.defaults.baseURL = 'https://www.ceshi.com';
} else if (process.env.NODE_ENV == 'production') {
  axios.defaults.baseURL = 'https://www.production.com';
}

请求超时

axios.defaults.timeout = 30000;

post请求头的设置

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

请求拦截器

axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    const token = store.state.token;
    token && (config.headers.Authorization = token);
    return config;
  },
  error => {
    return Promise.error(error);
  })

响应拦截器

axios.interceptors.response.use(
    response => {
      if (response.status === 200) {
        return Promise.resolve(response);
      } else {
        return Promise.reject(response);
      }
    },
    // 服务器状态码不是200的情况
    error => {
      if (error.response.status) {
        switch (error.response.status) {
          // 401: 未登录
          // 未登录则跳转登录页面，并携带当前页面的路径
          // 在登录成功后返回当前页面，这一步需要在登录页操作。
          case 401:
            router.replace({
              path: '/login',
              query: {
                redirect: router.currentRoute.fullPath
              }
            });
            break;
            // 403 token过期
            // 登录过期对用户进行提示
            // 清除本地token和清空vuex中token对象
            // 跳转登录页面
          case 403:
            element({
              message: '登录过期，请重新登录',
              duration: 1000,
              forbidClick: true
            });
            // 清除token
            localStorage.removeItem('token');
            store.commit('loginSuccess', null);
            // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
            setTimeout(() => {
              router.replace({
                path: '/login',
                query: {
                  redirect: router.currentRoute.fullPath
                }
              });
            }, 1000);
            break;
            // 404请求不存在
          case 404:
            element({
              message: '网络请求不存在',
              duration: 1500,
              forbidClick: true
            });
            break;
            // 其他错误，直接抛出错误提示
          default:
            element({
              message: error.response.data.message,
              duration: 1500,
              forbidClick: true
            });
        }
        return Promise.reject(error.response);
      }
    }

封装请求方法

// 定义请求头 使用JSON格式
    axios.defaults.baseURL = baseURL // Default base path

    axios.defaults.headers.post['Content-Type'] = 'application/json;charSet=UTF-8'

    axios.defaults.headers.get['Content-Type'] = 'application/json;charSet=UTF-8'

    axios.defaults.headers.put['Content-Type'] = 'application/json;charSet=UTF-8'

    axios.defaults.headers.delete['Content-Type'] = 'application/json;charSet=UTF-8'

    axios.defaults.headers.patch['Content-Type'] = 'application/json;charSet=UTF-8'

export default {
      /**
      * get 方法封装

      * @param url

      * @param params

      * @returns {Promise}

      */

      get(url, params = {}) {
        return new Promise((resolve, reject) => {
          // 若使用this.$http.get('qyolg5_1GB3ak1aU2jmKq1nWpMs.js', {bu: 'DiUrXmptcGdhZJ8BogErlAEr'}) 方式传参 必须使用 {params:params}
          // 若使用this.$http.get('qyolg5_1GB3ak1aU2jmKq1nWpMs.js?bu=DiUrXmptcGdhZJ8BogErlAEr') 方式传参 必须使用 params
          axios.get(url, {
            params: params
          }).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject(err)
          })
        })
      },

      /**

      * post

      * @param url

      * @param params

      * @returns {Promise}

      */

      post(url, params = {}) {
        return new Promise((resolve, reject) => {
          axios.post(url, params)
            .then(res => {
              resolve(res.data)
            }, err => {
              reject(err)
            })
        })
      },

      /**

      * delete 方法封装

      * @param url

      * @param params

      * @returns {Promise}

      */

      delete(url, params = {}) {
        return new Promise((resolve, reject) => {
          axios.delete(url, params).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject(err)
          })
        })
      },

      /**

      * put 方法封装

      * @param url

      * @param params

      * @returns {Promise}

      */

      put(url, params = {}) {
        return new Promise((resolve, reject) => {
          axios.put(url, params).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject(err)
          })
        })
      },

      /**

      * patch 方法封装

      * @param url

      * @param params

      * @returns {Promise}

      */

      patch(url, params = {}) {
        return new Promise((resolve, reject) => {
          axios.patch(url, params).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject(err)
          })
        })
      }
    }

全部代码

import axios from 'axios' //引入
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import { element } from 'element ui';


// 设置环境和请求
// 环境的切换
if (process.env.NODE_ENV == 'development') {
  axios.defaults.baseURL = 'https://www.baidu.com';
} else if (process.env.NODE_ENV == 'debug') {
  axios.defaults.baseURL = 'https://www.ceshi.com';
} else if (process.env.NODE_ENV == 'production') {
  axios.defaults.baseURL = 'https://www.production.com';
}
//请求超时
axios.defaults.timeout = 30000;

// post请求头的设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'


//请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    const token = store.state.token;
    token && (config.headers.Authorization = token);
    return config;
  },
  error => {
    return Promise.error(error);
  })

//响应拦截器
axios.interceptors.response.use(
    response => {
      if (response.status === 200) {
        return Promise.resolve(response);
      } else {
        return Promise.reject(response);
      }
    },
    // 服务器状态码不是200的情况
    error => {
      if (error.response.status) {
        switch (error.response.status) {
          // 401: 未登录
          // 未登录则跳转登录页面，并携带当前页面的路径
          // 在登录成功后返回当前页面，这一步需要在登录页操作。
          case 401:
            router.replace({
              path: '/login',
              query: {
                redirect: router.currentRoute.fullPath
              }
            });
            break;
            // 403 token过期
            // 登录过期对用户进行提示
            // 清除本地token和清空vuex中token对象
            // 跳转登录页面
          case 403:
            element({
              message: '登录过期，请重新登录',
              duration: 1000,
              forbidClick: true
            });
            // 清除token
            localStorage.removeItem('token');
            store.commit('loginSuccess', null);
            // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
            setTimeout(() => {
              router.replace({
                path: '/login',
                query: {
                  redirect: router.currentRoute.fullPath
                }
              });
            }, 1000);
            break;
            // 404请求不存在
          case 404:
            element({
              message: '网络请求不存在',
              duration: 1500,
              forbidClick: true
            });
            break;
            // 其他错误，直接抛出错误提示
          default:
            element({
              message: error.response.data.message,
              duration: 1500,
              forbidClick: true
            });
        }
        return Promise.reject(error.response);
      }
    }
    // 封装方法

    // 定义请求头 使用JSON格式
    axios.defaults.baseURL = baseURL // Default base path

    axios.defaults.headers.post['Content-Type'] = 'application/json;charSet=UTF-8'

    axios.defaults.headers.get['Content-Type'] = 'application/json;charSet=UTF-8'

    axios.defaults.headers.put['Content-Type'] = 'application/json;charSet=UTF-8'

    axios.defaults.headers.delete['Content-Type'] = 'application/json;charSet=UTF-8'

    axios.defaults.headers.patch['Content-Type'] = 'application/json;charSet=UTF-8'

    export default {
      /**
      * get 方法封装

      * @param url

      * @param params

      * @returns {Promise}

      */

      get(url, params = {}) {
        return new Promise((resolve, reject) => {
          // 若使用this.$http.get('qyolg5_1GB3ak1aU2jmKq1nWpMs.js', {bu: 'DiUrXmptcGdhZJ8BogErlAEr'}) 方式传参 必须使用 {params:params}
          // 若使用this.$http.get('qyolg5_1GB3ak1aU2jmKq1nWpMs.js?bu=DiUrXmptcGdhZJ8BogErlAEr') 方式传参 必须使用 params
          axios.get(url, {
            params: params
          }).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject(err)
          })
        })
      },

      /**

      * post

      * @param url

      * @param params

      * @returns {Promise}

      */

      post(url, params = {}) {
        return new Promise((resolve, reject) => {
          axios.post(url, params)
            .then(res => {
              resolve(res.data)
            }, err => {
              reject(err)
            })
        })
      },

      /**

      * delete 方法封装

      * @param url

      * @param params

      * @returns {Promise}

      */

      delete(url, params = {}) {
        return new Promise((resolve, reject) => {
          axios.delete(url, params).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject(err)
          })
        })
      },

      /**

      * put 方法封装

      * @param url

      * @param params

      * @returns {Promise}

      */

      put(url, params = {}) {
        return new Promise((resolve, reject) => {
          axios.put(url, params).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject(err)
          })
        })
      },

      /**

      * patch 方法封装

      * @param url

      * @param params

      * @returns {Promise}

      */

      patch(url, params = {}) {
        return new Promise((resolve, reject) => {
          axios.patch(url, params).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject(err)
          })
        })
      }
    }

api.js

import { get, post, put, delete, patch} from './http'

post

export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);

get

export const apiAddress = p => get('api/v1/users/my_address/address_edit_before',{p});

页面中调用

import { apiAddress } from '@/request/api'; 导入我们的api接口
 show(){
       let pste={
	        type:0,
	        sort:1
       }
   apiAddress(pste).then(res => {
                  // 获取数据成功后的其他操作
           }).catch({

          })
     }
 }

完结，如有不妥，请指出。