vue2項(xiàng)目中全局封裝axios問(wèn)題

更新時(shí)間：2022年10月10日 15:39:38 作者：洋養(yǎng)楊陽(yáng)

這篇文章主要介紹了vue2項(xiàng)目中全局封裝axios問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue2全局封裝axios

封裝axios

第一步

1.src 目錄中新建utils文件夾
2.utils文件中建立http.js文件

http.js文件的內(nèi)容

//第一步導(dǎo)入axios
import axios from 'axios'
import { Toast } from 'vant';
//第二步 我們可以聲明一個(gè)新的常量axios 我們可以配置一些基礎(chǔ) 公共的路徑配置   比如說(shuō)baseURL timeout請(qǐng)求失敗超時(shí)報(bào)錯(cuò) withcookies...之類(lèi)的東西
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL//如果配置了環(huán)境變量就可以直接寫(xiě)/api,
    withCredentials: true,
    timeout: 3000//請(qǐng)求超時(shí)
})

//第三步 設(shè)置請(qǐng)求攔截
//新的常量axios service.攔截器.請(qǐng)求.使用===》 里頭有兩個(gè)參數(shù) 一個(gè)成功的回調(diào)函數(shù)  一個(gè)失敗的回調(diào)函數(shù)
service.interceptors.request.use(config=>{
    //每次發(fā)送請(qǐng)求要進(jìn)行的公共操作  每次發(fā)送請(qǐng)求一般需要的操作一般都有 開(kāi)啟loading加載動(dòng)畫(huà) token寫(xiě)在請(qǐng)求的頭部 之類(lèi)的
    //loading
    Toast.loading({
        message: '加載中...',
        forbidClick: true,
      });
    //最后的話(huà)一定要給他return出去 不return不執(zhí)行
    return config
},err=>{
    //請(qǐng)求的時(shí)候如果發(fā)生錯(cuò)誤了， 這邊直接給它拋出錯(cuò)誤就行
    // throw new Error(err)拋出的是一個(gè)紅色的報(bào)錯(cuò)方便我們查看尋找
    throw new Error(err)
})

//第四步 設(shè)置響應(yīng)攔截
service.interceptors.response.use(response=>{
//我們每次成功發(fā)送一個(gè)請(qǐng)求 它都會(huì)有響應(yīng)的 參數(shù)也是兩個(gè)
    //一般成功之后可以清除或關(guān)閉loading動(dòng)畫(huà) 還可以判斷一些狀態(tài)碼
  //清除loading動(dòng)畫(huà) 
    Toast.clear()
    
    //判斷狀態(tài)碼
    const res = response.data
    if (res.status && res.status !== 200) {
      // 登錄超時(shí),重新登錄
      if (res.status === 401) {
        Toast.loading({
            message: '登錄超時(shí)，請(qǐng)從新登錄',
            forbidClick: true,
          });
      }
      return Promise.reject(res || 'error')
    } else {
      return res.data
    }
},err=>{
    return Promise.reject(err)
})
//導(dǎo)出  導(dǎo)出這個(gè)模塊
export default service

封裝api 函數(shù)

第一步先在utils文件夾中新建api.js

api.js文件的內(nèi)容

//這邊的話(huà) 先導(dǎo)入封裝好的新的axios
import service from './http';
//然后我們可以封裝一些接口函數(shù) 比如說(shuō) 登錄的 注冊(cè)的 首頁(yè)的 分類(lèi)的 輪播的 //但是要確認(rèn)參數(shù)傳的是get還是post請(qǐng)求
//首頁(yè)
export function getHome(data){
    return service.get('/home',data)
}
//方便我們后期的維護(hù) 代碼美觀 方便快捷
//輪播
export function lunbo(data){
    return service.get('/home/shejishi',data)
}
//比如說(shuō)以后我們要維護(hù)封裝好的接口 這樣封裝好后我們就不需要去組件里一個(gè)一個(gè)去找，直接來(lái)這個(gè)文件修改即可
//組件化開(kāi)模塊化發(fā)或者開(kāi)發(fā) 它們都有一個(gè)原則
//高聚合 低耦合 
//高聚合就是 一個(gè)組件的業(yè)務(wù)一定要聚合在一起 一個(gè)組件的業(yè)務(wù)越集中越好
//低耦合就是 組件和組件之間的耦合度一定要低 意思就是兩個(gè)組件之間的牽連越少越好

vue2.X中axios簡(jiǎn)單封裝和多功能封裝

vue2.X 中axios的簡(jiǎn)單封裝

簡(jiǎn)單封裝說(shuō)明了封裝思路，適合小白但想嘗試封裝的人。你可以在此基礎(chǔ)上進(jìn)行追加改造.

1.引入庫(kù)

代碼如下（示例）：

npm install axios 
npm install element-ui -S
// 或者
yarn add axios
yarn add element-ui

2.創(chuàng)建封裝文件 request.js

代碼如下（示例）：

/**
 * 全站http配置
 */
import axios from 'axios';
import { Message } from 'element-ui';
//默認(rèn)超時(shí)時(shí)間
axios.defaults.timeout = 10000;
//返回其他狀態(tài)碼
axios.defaults.validateStatus = function (status) {
  return status >= 200 && status <= 500;
};
//跨域請(qǐng)求，允許保存cookie
axios.defaults.withCredentials = true;
//http request攔截 ，此處用到es6 Promise
axios.interceptors.request.use(config => {
	// 你可以通過(guò)config來(lái)配置請(qǐng)求頭...
  const meta = (config.meta || {});
  //headers中配置text請(qǐng)求
  if (config.text === true) {
    config.headers["Content-Type"] = "text/plain";
  }
  //headers中配置serialize為true開(kāi)啟序列化
  if (config.method === 'post' && meta.isSerialize === true) {
    config.data = serialize(config.data);
  }
  return config
}, error => {
  return Promise.reject(error)
});
//http response 攔截，此處用到es6 Promise
axios.interceptors.response.use(res => {
  //獲取狀態(tài)碼
  const status = res.data.code || res.status;
  const message = res.data.msg || res.data.error_description || '未知錯(cuò)誤';
  //如果是401則跳轉(zhuǎn)到登錄頁(yè)面
  if (status === 401) { 
	//router.push({ path: '/login' }))
  }; 
  // 如果請(qǐng)求為非200否者默認(rèn)統(tǒng)一處理
  if (status !== 200) {
    Message({
      message: message,
      type: 'error'
    });
    return Promise.reject(new Error(message))
  }
  return res;
}, error => {
 
  return Promise.reject(new Error(error));
});
export default axios;

3.使用方式

在vue項(xiàng)目的根目錄下的main.js 正常引用就好啦

import request from './api/request/request.js'  
Vue.prototype.request = request;

接下來(lái)去頁(yè)面中調(diào)用。這里唯一可能會(huì)犯錯(cuò)的地方

1. url路徑的開(kāi)頭忘記加 / 了！ hhh
2. /api 不明白是干什么的。其實(shí)這里是 devServer.proxy 的key

let _self = this;
let id = '123';
let name = 'abner';
let url = '/api/blade-performance-mgt/hzy/performance/record/planSubmit';  // 請(qǐng)求地址
// post 請(qǐng)求
 _self.request
     .post(url, {
         id: id,
         name: name ,
     })
     .then((res) => {
         // res
     });
     
     
// git 請(qǐng)求
let url = '/api/blade-performance-mgt/hzy/performance/record/list;  // 請(qǐng)求地址
_self.request.get(url)
  .then((res) => {
    // res
  });

也發(fā)下vue.config.js的配置吧！

這里只需要看下devServer中的配置就行

module.exports = {
  //路徑前綴
  publicPath: "/",
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    });
    const entry = config.entry('app');
    entry.add('babel-polyfill').end();
    entry.add('classlist-polyfill').end();
    entry.add('@/mock').end();
  },
  css: {
    extract: { ignoreOrder: true }
  },
  //開(kāi)發(fā)模式反向代理配置，生產(chǎn)模式請(qǐng)使用Nginx部署并配置反向代理
  devServer: {
    port: 1888,
    proxy: {
      '/api': {
        //本地服務(wù)接口地址
        // target: 'http://localhost',
        //遠(yuǎn)程演示服務(wù)地址,可用于直接啟動(dòng)項(xiàng)目
        target: 'http://10.1.100.248:8000/api',
        // target: 'http://10.1.6.67:8033',
        ws: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
};

多功能封裝

這種為了更好的分離代碼，需要?jiǎng)?chuàng)建兩個(gè)文件interceptor.js和request.js

1.創(chuàng)建request文件夾，我的項(xiàng)目目錄如下

interceptor.js 代碼如下

/**
 * Author：abner ，修改于5月28
 * 生成基礎(chǔ)axios對(duì)象，并對(duì)請(qǐng)求和響應(yīng)做處理
 * 前后端約定接口返回解構(gòu)規(guī)范
 * {
 *    code:200,
 *    data:"成功",
 *    msg: "操作成功"
 *    success: true
 * }
 */
import axios from 'axios'
import { Message } from 'element-ui'
import { getToken } from '@/util/auth'; // 獲取token值的方法，如何沒(méi)有用token驗(yàn)證刪掉即可
// 創(chuàng)建一個(gè)獨(dú)立的axios實(shí)例
const service = axios.create({
    // 設(shè)置baseUr地址,如果通過(guò)proxy跨域可直接填寫(xiě)base地址
    baseURL: '/api',
    // 定義統(tǒng)一的請(qǐng)求頭部
    headers: {
       // 'Authorization': ``, // 此處對(duì)應(yīng)后臺(tái)AOP驗(yàn)證,
        'Content-Type': 'application/json' //默認(rèn)方式提交數(shù)據(jù)
        // 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' //表單方式提交數(shù)據(jù)
    },
    // 配置請(qǐng)求超時(shí)時(shí)間
    timeout: 10000,
    // 如果用的JSONP，可以配置此參數(shù)帶上cookie憑證，如果是代理和CORS不用設(shè)置
    withCredentials: true
});
// 請(qǐng)求攔截
service.interceptors.request.use(config => {
    // 在header中自定義token參數(shù)名：tokenHeader，可添加項(xiàng)目token
    config.headers[tokenHeader] =  getToken()
    return config;
});
// 返回?cái)r截
service.interceptors.response.use((response) => {
    // 獲取接口返回結(jié)果
    const res = response.data;
    // code為200，直接把結(jié)果返回回去，這樣前端代碼就不用在獲取一次data.
    if (res.code === 200) {
        return res;
    } else if (res.code === 10000) {
        // 10000假設(shè)是未登錄狀態(tài)碼
        Message.warning(res.msg);
        // 也可使用router進(jìn)行跳轉(zhuǎn)
        window.location.href = '/#/login';
        return res;
    } else {
        // 錯(cuò)誤顯示可在service中控制，因?yàn)槟承﹫?chǎng)景我們不想要展示錯(cuò)誤
        // Message.error(res.message);
        return res;
    }
}, () => {
    Message.error('網(wǎng)絡(luò)請(qǐng)求異常，請(qǐng)稍后重試!');
});
export default service;

request.js中你需要知道的

這里需要說(shuō)明的是請(qǐng)求方式那里的判斷，我們需要知道axios不同請(qǐng)求方式默認(rèn)傳參的方式是不同的，比如：

1.post請(qǐng)求我們一般都用data:{} 這中方式傳參

2.get請(qǐng)求我們一般都用params:{} 這中方式傳參

又比如

//如果服務(wù)端將參數(shù)作為對(duì)象來(lái)封裝接受
axios.delete('demo/url', {
    data: {
        id: 123,
        name: 'Henry',
    },
     timeout: 1000,
    ...//其他相關(guān)配置
})
//如果服務(wù)端將參數(shù)作為url參數(shù)來(lái)接受，則請(qǐng)求的url為:www.demo/url?a=1&b=2形式
axios.delete('demo/url', {
    params: {
        id: 123,
        name: 'Henry',
    },
     timeout: 1000,
    ...//其他相關(guān)配置
})

我們需要對(duì)不同的請(qǐng)求，不同的情況進(jìn)行判斷處理

request.js 代碼如下

/**
 * request.js
 * 通過(guò)promise對(duì)axios做二次封裝，針對(duì)用戶(hù)端參數(shù)，做靈活配置
 * Author：abner ，修改于5月28
 */
import { Message, Loading } from 'element-ui';
import instance from './interceptor'
/**
 * 核心函數(shù)，可通過(guò)它處理一切請(qǐng)求數(shù)據(jù)，并做橫向擴(kuò)展
 * @param {url} 請(qǐng)求地址
 * @param {params} 請(qǐng)求參數(shù)
 * @param {options} 請(qǐng)求配置，針對(duì)當(dāng)前本次請(qǐng)求；
 * @param loading 是否顯示loading
 * @param mock 本次是否請(qǐng)求mock而非線(xiàn)上
 * @param error 本次是否顯示錯(cuò)誤
 */
function request(url, params, options = { loading: true, mock: false, error: true }, method) {
    // let loadingInstance = '';
    // 請(qǐng)求前l(fā)oading
    // if (options.loading) loadingInstance = Loading.service({background:'transparent'});
    return new Promise((resolve, reject) => {
        let data = {}
        // get請(qǐng)求使用params字段
        if (method == 'get') data = { params }
        // post請(qǐng)求使用data字段
        if (method == 'post') data = { data: params }
        // delete請(qǐng)求使用params字段
        if (method == 'delete') data = { params }
        // 通過(guò)mock平臺(tái)可對(duì)局部接口進(jìn)行mock設(shè)置
        if (options.mock) url = 'http://www.mock.com/mock/xxxx/api';
        instance({
            url,
            method,
            ...data
        }).then((res) => {
            // 此處作用很大，可以擴(kuò)展很多功能。對(duì)返回的數(shù)據(jù)進(jìn)行統(tǒng)一處理
            if (res && res.code === 200) {
                resolve(res.data);
            } else {
                // 通過(guò)配置可關(guān)閉錯(cuò)誤提示
                if (res && options.error) Message.error(res.msg);
                reject(res);
            }
        }).catch((error) => {
            Message.error(error.message)
        }).finally(() => {
            // loadingInstance.close();
        })
    })
}
// 封裝GET請(qǐng)求
function get(url, params, options) {
    return request(url, params, options, 'get')
}
// 封裝POST請(qǐng)求
function post(url, params, options) {
    return request(url, params, options, 'post')
}
// 封裝DELETE請(qǐng)求
function Delete(url, params, options) {
    return request(url, params, options, 'delete')
}
export default {
    get, post, Delete
}

使用步驟

1.在main.js中添加

import request from './api/request/request'
Vue.prototype.request = request;

2.在方法中直接使用

methods: {
        getUnitTabledata() {
            let _self = this;
            _self.request
                .get("/lnjzxh-awards-mgt/lnjzxh/award/serial/unit/list/page", {
                    awardName: _self.searchName,
                    status: _self.statusValue,
                    account: _self.account,
                    createDate: _self.pickerValue,
                    current: _self.page.currentPage - 1,
                    size: _self.page.pageSize,
                })
                .then((res) => {
                    _self.page.total = res.total;
                    _self.tableData = res.records;
                });
        },
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: