99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

vue中axios的封裝請求怎么實(shí)現(xiàn)

這篇“vue中axios的封裝請求怎么實(shí)現(xiàn)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue中axios的封裝請求怎么實(shí)現(xiàn)”文章吧。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供陽信企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、成都網(wǎng)站制作、H5建站、小程序制作等業(yè)務(wù)。10年已為陽信眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

一、簡介

axios 是一個(gè)輕量的HTTP客戶端，它基于 XMLHttpRequest 服務(wù)來執(zhí)行 HTTP 請求，支持豐富的配置，支持 Promise，支持瀏覽器端和 Node.js 端。自Vue2.0起，尤大大宣布取消對vue-resource 的官方推薦，轉(zhuǎn)而推薦 axios?，F(xiàn)在 axios 已經(jīng)成為大部分 Vue 開發(fā)者的首選。（ 如果你還不熟悉 axios，可以在這里查看它的API。）

封裝前，先來看下，不封裝的情況下，一個(gè)實(shí)際項(xiàng)目中axios請求的樣子。

大概是長這樣：

axios('http://localhost:3000/data', {
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    return data;
  }],
  // 其他請求配置...
})
.then((data) => {
  // todo: 真正業(yè)務(wù)邏輯代碼
  console.log(data);
}, (err) => {
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他錯(cuò)誤處理.....
  console.log(err);
});

可以看到在這段代碼中，頁面代碼邏輯只在第15行處，上方的一大塊請求配置代碼和下方一大塊響應(yīng)錯(cuò)誤處理代碼，幾乎跟頁面功能沒有關(guān)系，而且每個(gè)請求中這些內(nèi)容都差不多，甚至有的部分完全一樣。

二、封裝后

1.封裝步驟

封裝的本質(zhì)就是在待封裝的內(nèi)容外面添加各種東西，然后把它們作為一個(gè)新的整體呈現(xiàn)給使用者，以達(dá)到擴(kuò)展和易用的目的。

封裝 axios 要做的事情，就是把所有HTTP請求共用的配置，事先都在axios上配置好，預(yù)留好必要的參數(shù)和接口，然后把它作為新的axios返回。

目錄結(jié)構(gòu)如下(由Vue-cli 3.0 生成)：

|--public/
|--mock/
|   |--db.json  # 我新建的接口模擬數(shù)據(jù)
|--src/
|   |--assets/
|   |--components/
|   |--router/
|   |--store/
|   |--views/
|       |--Home.Vue
|   |--App.vue
|   |--main.js
|   |--theme.styl
|--package.json
|...

2.封裝目標(biāo)

在 Home 頁，發(fā)起 axios 請求時(shí)就像調(diào)用一個(gè)只有少量參數(shù)的方法一樣簡單，這樣我就可以專注業(yè)務(wù)代碼了。

1. 將 axios 封裝到一個(gè)獨(dú)立的文件

  • 在src下創(chuàng)建 utils/http.js 文件

  cd src
  mkdir utils
  touch http.js

  • 引入 axios

  // src/utils/http.js
  import axios from 'axios';

  • 創(chuàng)建一個(gè)類

  //src/utils/http.js
  //...
  class NewAxios {
  
  }

  • 給不同環(huán)境配置不同請求地址

根據(jù)process.env.NODE_ENV 配置不同的 baseURL，使項(xiàng)目只需執(zhí)行相應(yīng)打包命令，就可以在不同環(huán)境中自動(dòng)切換請求主機(jī)地址。

// src/utils/http.js

//...
const getBaseUrl = (env) => {
  let base = {
    production: '/',
    development: 'http://localhost:3000',
    test: 'http://localhost:3001',
  }[env];
  if (!base) {
    base = '/';
  }
  return base;
};

class NewAxios {
  constructor() {
    this.baseURL = getBaseUrl(process.env.NODE_ENV);
  }
}

  • 配置超時(shí)時(shí)間

timeout屬性，我一般設(shè)置10秒。

// src/utils/http.js

//...
class NewAxios {
  constructor() {
    //...
    this.timeout = 10000;
  }
}

  • 配置允許攜帶憑證

widthCredentials屬性設(shè)為true

// src/utils/http.js

//...
class NewAxios {
  constructor() {
    //...
    this.withCredentials = true;
  }
}

  • 給這個(gè)類創(chuàng)建實(shí)例上的方法request

在 request 方法里，創(chuàng)建新的axios實(shí)例，接收請求配置參數(shù)，處理參數(shù)，添加配置，返回axios實(shí)例的請求結(jié)果（一個(gè)promise對象）。

你也可以不創(chuàng)建，直接使用默認(rèn)導(dǎo)出的axios實(shí)例，然后把所有配置都放到它上面，不過這樣一來整個(gè)項(xiàng)目就會(huì)共用一個(gè)axios實(shí)例。雖然大部分項(xiàng)目下這樣夠用沒問題，但是有的項(xiàng)目中不同服務(wù)地址的請求和響應(yīng)結(jié)構(gòu)可能完全不同，這個(gè)時(shí)候共用一個(gè)實(shí)例就沒辦法支持了。所以為了封裝可以更通用，更具靈活性，我會(huì)使用axios的create方法，使每次發(fā)請求都是新的axios實(shí)例。

// src/utils/http.js

//...
class NewAxios {
  //...
  request(options) {
    // 每次請求都會(huì)創(chuàng)建新的axios實(shí)例。
    const instance = axios.create();
    const config = { // 將用戶傳過來的參數(shù)與公共配置合并。
      ...options,
      baseURL: this.baseURL,
      timeout: this.timeout,
      withCredentials: this.withCredentials,
    };
    // 配置攔截器，支持根據(jù)不同url配置不同的攔截器。
    this.setInterceptors(instance, options.url);
    return instance(config); // 返回axios實(shí)例的執(zhí)行結(jié)果
  }
}

因?yàn)閿r截器配置內(nèi)容比較多，所以封裝成一個(gè)內(nèi)部函數(shù)了。

  • 配置請求攔截器

在發(fā)送請求前對請求參數(shù)做的所有修改都在這里統(tǒng)一配置。比如統(tǒng)一添加token憑證、統(tǒng)一設(shè)置語言、統(tǒng)一設(shè)置內(nèi)容類型、指定數(shù)據(jù)格式等等。做完后記得返回這個(gè)配置，否則整個(gè)請求不會(huì)進(jìn)行。

我這里就配置一個(gè)token。

// src/utils/http.js

//...
class NewAxios {
  //...
  // 這里的url可供你針對需要特殊處理的接口路徑設(shè)置不同攔截器。
  setInterceptors = (instance, url) => { 
    instance.interceptors.request.use((config) => { // 請求攔截器
      // 配置token
      config.headers.AuthorizationToken = localStorage.getItem('AuthorizationToken') || '';
      return config;
    }, err => Promise.reject(err));
  }
  //...
}

  • 配置響應(yīng)攔截器

在請求的then或catch處理前對響應(yīng)數(shù)據(jù)進(jìn)行一輪預(yù)先處理。比如過濾響應(yīng)數(shù)據(jù)，更多的，是在這里對各種響應(yīng)錯(cuò)誤碼進(jìn)行統(tǒng)一錯(cuò)誤處理，還有斷網(wǎng)處理等等。

我這里就判斷一下403和斷網(wǎng)。

// src/utils/http.js

//...
class NewAxios {
  //...
  setInterceptors = (instance, url) => {
    //...
    instance.interceptors.response.use((response) => { // 響應(yīng)攔截器
      // todo: 想根據(jù)業(yè)務(wù)需要，對響應(yīng)結(jié)果預(yù)先處理的，都放在這里
      console.log();
      return response;
    }, (err) => {
      if (err.response) { // 響應(yīng)錯(cuò)誤碼處理
        switch (err.response.status) {
          case '403':
            // todo: handler server forbidden error
            break;
            // todo: handler other status code
          default:
            break;
        }
        return Promise.reject(err.response);
      }
      if (!window.navigator.online) { // 斷網(wǎng)處理
        // todo: jump to offline page
        return -1;
      }
      return Promise.reject(err);
    });
  }
  //...
}

另外，在攔截器里，還適合放置loading等緩沖效果：在請求攔截器里顯示loading，在響應(yīng)攔截器里移除loading。這樣所有請求就都有了一個(gè)統(tǒng)一的loading效果。

  • 默認(rèn)導(dǎo)出新的實(shí)例

  // src/utils/http.js
  
  //...
  export default new NewAxios();

最后完整的代碼如下：

// src/utils/http.js

import axios from 'axios';

const getBaseUrl = (env) => {
  let base = {
    production: '/',
    development: 'http://localhost:3000',
    test: 'http://localhost:3001',
  }[env];
  if (!base) {
    base = '/';
  }
  return base;
};

class NewAxios {
  constructor() {
    this.baseURL = getBaseUrl(process.env.NODE_ENV);
    this.timeout = 10000;
    this.withCredentials = true;
  }

  // 這里的url可供你針對需要特殊處理的接口路徑設(shè)置不同攔截器。
  setInterceptors = (instance, url) => {
    instance.interceptors.request.use((config) => {
      // 在這里添加loading
      // 配置token
      config.headers.AuthorizationToken = localStorage.getItem('AuthorizationToken') || '';
      return config;
    }, err => Promise.reject(err));

    instance.interceptors.response.use((response) => {
      // 在這里移除loading
      // todo: 想根據(jù)業(yè)務(wù)需要，對響應(yīng)結(jié)果預(yù)先處理的，都放在這里
      return response;
    }, (err) => {
      if (err.response) { // 響應(yīng)錯(cuò)誤碼處理
        switch (err.response.status) {
          case '403':
            // todo: handler server forbidden error
            break;
            // todo: handler other status code
          default:
            break;
        }
        return Promise.reject(err.response);
      }
      if (!window.navigator.online) { // 斷網(wǎng)處理
        // todo: jump to offline page
        return -1;
      }
      return Promise.reject(err);
    });
  }

  request(options) {
    // 每次請求都會(huì)創(chuàng)建新的axios實(shí)例。
    const instance = axios.create();
    const config = { // 將用戶傳過來的參數(shù)與公共配置合并。
      ...options,
      baseURL: this.baseURL,
      timeout: this.timeout,
      withCredentials: this.withCredentials,
    };
    // 配置攔截器，支持根據(jù)不同url配置不同的攔截器。
    this.setInterceptors(instance, options.url);
    return instance(config); // 返回axios實(shí)例的執(zhí)行結(jié)果
  }
}

export default new NewAxios();

現(xiàn)在 axios 封裝算是完成了80%。我們還需要再進(jìn)一步把a(bǔ)xios和接口結(jié)合再封裝一層，才能達(dá)到我在一開始定的封裝目標(biāo)。

3. 使用新的 axios 封裝API

  • 在 src 目錄下新建 api 文件夾。把所有涉及HTTP請求的接口統(tǒng)一集中到這個(gè)目錄來管理。

  • 新建 home.js。我們需要把接口根據(jù)一定規(guī)則分好類，一類接口對應(yīng)一個(gè)js文件。這個(gè)分類可以是按頁面來劃分，或者按模塊等等。為了演示更直觀，我這里就按頁面來劃分了。實(shí)際根據(jù)自己的需求來定。

  • 使用新的 axios 封裝API（固定url的值，合并用戶傳過來的參數(shù)），然后命名導(dǎo)出這些函數(shù)。

// src/api/home.js 

import axios from '@/utils/http';
export const fetchData = options => axios.request({
  ...options,
  url: '/data',
});
export default {};

在 api 目錄下新建 index.js，把其他文件的接口都在這個(gè)文件里匯總導(dǎo)出。

 // src/api/index.js
  
  export * from './home';

這層封裝將我們的新的axios封裝到了更簡潔更語義化的接口方法中。

現(xiàn)在我們的目錄結(jié)構(gòu)長這樣：

|--public/
|--mock/
|   |--db.json  # 接口模擬數(shù)據(jù)
|--src/
|   |--api/     # 所有的接口都集中在這個(gè)目錄下
|       |--home.js  # Home頁面里涉及到的接口封裝在這里
|       |--index.js # 項(xiàng)目中所有接口調(diào)用的入口
|   |--assets/
|   |--components/
|   |--router/
|   |--store/
|   |--utils/
|       |--http.js  # axios封裝在這里
|   |--views/
|       |--Home.Vue
|   |--App.vue
|   |--main.js
|   |--theme.styl
|--package.json
|...

4.使用封裝后的axios

現(xiàn)在我們要發(fā)HTTP請求時(shí)，只需引入 api 下的 index.js 文件就可以調(diào)用任何接口了，并且用的是封裝后的 axios。

// src/views/Home.vue

<template>
  <div class="home">
    <h2>This is home page</h2>
  </div>
</template>

<script>
// @ is an alias to /src
import { fetchData } from '@/api/index';

export default {
  name: 'home',
  mounted() {
    fetchData()  // axios請求在這里
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

axios請求被封裝在fetchData函數(shù)里，頁面請求壓根不需要出現(xiàn)任何axios API，悄無聲息地發(fā)起請求獲取響應(yīng)，就像在調(diào)用一個(gè)簡單的 Promise 函數(shù)一樣輕松。并且在頁面中只需專注處理業(yè)務(wù)功能，不用被其他事物干擾。

以上就是關(guān)于“vue中axios的封裝請求怎么實(shí)現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：vue中axios的封裝請求怎么實(shí)現(xiàn)
URL地址：http://www.yijiale78.com/article10/gcsgdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、服務(wù)器托管、App設(shè)計(jì)、網(wǎng)站維護(hù)、靜態(tài)網(wǎng)站、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管