vue axios 安装及封装

以你之姓@ 2022-09-08 03:38 149阅读 0赞

## 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({
    
              })
         }
     }

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