Axios の構成手順 (詳細なチュートリアル)

この記事では、動的 Axios の構成手順を主に説明します。このチュートリアルを通じて、動的 Axios の構成を簡単に実現できます。

前書き

私が過去に Vue プロジェクトを書いたとき、プロジェクトの ajax ライブラリとして vue-resource を使用していました。11 月のある日、Youda Weibo が、ajax ライブラリはユニバーサルであるべきだと更新し、vue-resource の使用を中止しました。リソースのテクニカル サポートについては、axios の使用をお勧めします。

プロジェクトの作成と管理には Vue-cli ツールを使用することをお勧めします。最初は慣れていなくても、使用すると秘密がわかります。少し前まで、公式に推奨されていたデータ要求プラグインは Vue-resource でしたが、現在は Axios に変わりました。なぜ変わったのかはわかりませんが、とにかく、このプラグインの方が使いやすいです。なので、それを使ってください。ここにいくつかのカプセル化軸があります。経験を求めています。間違っている場合は教えていただければ幸いです。

方法は次のとおりです

1. ファイルを作成します。Vue プロジェクトが初期化された後、これは通常、いくつかのカプセル化された関数メソッドを保存するために使用されます。 util ファイル ディレクトリに util ファイル ディレクトリを作成します。 axios メソッドをカプセル化するために、以下の http.js ファイルを作成します。

2 番目、コードを直接アップロードします (通常バージョン)。コードには詳細なコメントがあります。

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置
axios.defaults.timeout = 5000; //设置超时时间
axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //这是调用数据接口
// http request 拦截器（所有发送的请求都要从这儿过一次），通过这个，我们就可以把token传到后台，我这里是使用sessionStorage来存储token等权限信息和用户信息，若要使用cookie可以自己封装一个函数并import便可使用
axios.interceptors.request.use(
 config => {
  const token = sessionStorage.getItem("token"); //获取存储在本地的token
  config.data = JSON.stringify(config.data);
  config.headers = {
   'Content-Type':'application/json' //设置跨域头部,虽然很多浏览器默认都是使用json传数据，但咱要考虑IE浏览器。
  };
  if (token) {
   config.headers.Authorization = "Token " + token; //携带权限参数
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 }
);


// http response 拦截器（所有接收到的请求都要从这儿过一次）
axios.interceptors.response.use(
 response => {
//response.status===401是我和后台约定的权限丢失或者权限不够返回的状态码，这个可以自己和后台约定，约定返回某个自定义字段也是可以的
  if(response.status == 401) {
   router.push({ //push后面是一个参数对象，可以携带很多参数，具体可以去vue-router上查看，例如query字段表示携带的参数
    path: '/login' 
   })
  }
  return response;
 },
 error => {
  return Promise.reject(error.response.data)
 });

export default axios;

/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}) {
 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err)
  })
 })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

3 番目、(動的バージョン)、axios インターセプターは必要ありません。すべてのプロジェクトで必要なわけではありません。 headers 認証を伴うメソッドが複数ある場合は、別のメソッドを使用する必要があります。

util/http.js

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置和拦截器都不用了，这里我使用了一个动态配置数据请求地址，在App.vue中，代码在下面，这个也不是必须的。
//^_^下面都设置一个默认的头部，使用的时候可以传入数据覆盖^_^,例如使用fetch(GET)方法时，没有请求数据，但是请求头有变化，则应写成 fetch("地址", {}, {"这里写头部的内容"}) 记住没数据用一个空对象占位置
/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}, headers = {
 'Content-Type': 'application/json', //设置跨域头部
 "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}) {

 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params,
   headers: headers
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err.response)
  })
 })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

App.vue (これはsrcディレクトリ内のプログラムエントリファイルです)

<template>
 <p id="app">
 <router-view/>
 </p>
</template>

<script>
import axios from &#39;axios&#39;;
let protocol = window.location.protocol; //协议
let host = window.location.host; //主机
let reg = /^localhost+/;
if(reg.test(host)) {
 //若本地项目调试使用
 axios.defaults.baseURL = &#39;http://10.0.xx.xxx:xxxx/api/&#39;;
} else {
 //动态请求地址
 axios.defaults.baseURL = protocol + "//" + host + "/api/";
}
axios.defaults.timeout = 30000;
export default {
 name: &#39;app&#39;,
 axios //这里记得导出，若请求地址永久固定一个，则就按照`普通版`配置一个baserURL就可以了
}
</script>

<style lang="scss"> //这里我使用的是scss
@import &#39;~@/style/style&#39;
</style>

概要

FAQ

動的バージョンを使用する場合、なぜそれが呼び出されるのか動的。アクセス アドレスとリクエスト アドレスが同じアドレスとポート番号であるため、たとえば、http://www.cmgos.com (デフォルトのポート 80) を通じてプロジェクトにアクセスすると、baseURL は自動的に http に変更されます。 :www .cmgos.com:80/api/、その理由は、プロジェクトが移行されるか、ある日 http が https に変更されるときに、リクエスト アドレスを変更する必要がなく、プログラムが自動的に完了するためです

データリクエストアドレスは正しく設定されていますか? BaseURL を構成すると、カプセル化された関数を使用するときに、baseURL に基づいてリクエスト アドレスを渡すだけで済みます。たとえば、login/ を渡すと、リクエスト アドレスは自動的に http:www.cmgos.com:80 になります。 /api/login/ が設定されていない場合は、リクエスト アドレス全体を直接渡すことができます

Notes

動的バージョンを使用する場合、インターセプターが使用されないため、以下にカプセル化された関数を

として記述する必要がありますエラーを返すとき err.response.data来获取返回的数据，但我写的是err.response，因为这样可以拿到(status)状态码等信息，若不需要判断返回的状态码，则改为err.response.data

上記はあなたのためにまとめたものです。将来役立つことを願っています。

関連記事:

pace.js と NProgress.js 読み込み進行状況プラグインの使用方法 (詳細なチュートリアル)

WeChat ミニ プログラムのアプリのライフ サイクルについて (詳細なチュートリアル)

NProgress についてjQuery での .js 読み込み進行プラグインの使用方法

WeChat アプレットでの switch コンポーネントの使用方法

以上がAxios の構成手順 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。