基於axios二次封裝，適用vue項目

插件背景

在項目中都須要與後臺進行數據交互，最經常使用的庫就是axios。
爲了更方便的在項目中的使用，那就本身動手開發一個基於項目的請求插件。
從接口配置、簡單調用、少許操做、Promise等需求點出發，最後寫出這個插件。
歡迎 點贊、收藏、評論、建議
歡迎 點贊、收藏、評論、建議
歡迎 點贊、收藏、評論、建議 （重要的事情說三遍）

插件鏈接（詳細使用教程）

npm
git

demo

接口調用案例源碼
接口調用案例在線

安裝方式

npm install axios-vue-http
複製代碼

使用

import Http from 'axios-vue-http'
Vue.use(Http);
複製代碼

圍繞請求如下幾個點思考

請求地址

地址：協議://域名.接口路徑[/url參數]

大部分請求只須要同域名，因此域名默認不須要配置。
接口路徑以實際開發爲準
url參數分兩類：
一類是get請求，如/?a=1&b=2
一類是相似路由參數，如/delUser/11,中的11

請求方式主要使用如下四種

• GET
• POST
• PUT
• DELETE

請求數據

傳入data爲Object類型，插件會根據Method自動放置
如 data = {a:1,b:2}, method: get時自動生成 url/?a=1&b=2

返回數據

返回數據格式是JSON。

example

import Http from 'axios-vue-http'
Vue.use(Http);

const apiList = [
	{apiName: 'getTest', method: 'GET', url: 'api/test'},
	{apiName: 'postTest', method: 'POST', url: 'api/test'},
	{apiName: 'delTest', method: 'DELETE', url: 'api/test'},
	{apiName: 'putTest', method: 'PUT', url: 'api/test'},
]

function success({res, resolve, reject}) {
  // 接口請求成功處理 (status === 200)
  // ...處理數據，
  // example res.data = {code: 200, data: {list: [], page: 1}, msg: '獲取成功'}
  let { data } = res;
  if(data.code = 200){
    resolve(data.data);
  }

  // example res.data = {code: -10001, msg: '獲取失敗'}
  let { data } = res;
  if(data.code < 0){
    app.$message.error(data.msg);
    reject(new Error(data.msg));
  }

  // 使用resolve(數據)向下傳遞
  // 使用reject(err)向下傳遞
}

function fail({res, reject}) {
	// 接口請求失敗處理(status !== 200)
  // 使用reject(err)向下傳遞
}


function genHeader() {
  let headers = {
    token: localStorage.getItem('token') || undefined,
  }
  return { headers };
}

const app = new Vue({
  beforeMount() {
    this.$http.addApiList(apiList); //設置接口列表
    this.$http.requestInterceptors(genHeader); //設置請求攔截器，添加headers token
    this.$http.setSuccess(success); //設置請求成功回調 
    this.$http.setFail(fail); //設置請求失敗回調 
  },
  render: h => h(App),
});

app.$mount('#app');

複製代碼

request

request(apiName, data, param);

參數	描述
apiName	接口請求名稱
data	接口發送數據 post中使用data, get中會拼到url中
param	url參數，例：request('getTest',{a:1}, '/123') ===> xxx.xxx.xxx/api/test/12…

// 在頁面中使用

	methods: {
		async getFetach(){
			try {
				const res = await this.$http.request('postTest', {p1: 1});
			}catch(err) {
				console.error('請求失敗：', err)
			}
		},
	}


複製代碼