vue でサードパーティのリクエストを実装する方法

Vue はサードパーティのリクエストを実装します: 1. "import axios from 'axios';" を通じて axios をインポートします; 2. プロトタイプ チェーンに axios を配置します; 3. "axios . interceptors.request.use(config => {...}".

##このチュートリアルの動作環境: Windows 10 システム、vue3 バージョン、DELL G3コンピューター

vue はサードパーティのリクエストをどのように実装しますか?

vue でのサードパーティ データのリクエスト --axios

1 axios - >Based on Promise object->async & await

2 create Phase->Return Promise object->返されたデータは直接分解可能 [データ処理]

書き込むには、インスタンスにインポートされたデータ (つまり、ページのレンダリングに使用されるデータ) は、構成パラメーター data を使用して受信する必要があります。

3 import axios from 'axios';

4 axios をインポートして複数回使用 -> axios をプロトタイプ チェーンに置く

import axios from 'axios';
Vue.prototype.axios = axios;

5 リクエスト メソッドのエイリアス

• axios.request(config)

• axios.get(url[, config])

• # #axios.delete(url[, config])

• axios.head(url[, config])

#axios.options(url [, config])

• ##axios.post(url[, data[, config]])

• #axios.put(url[, data[, config]])

• axios.patch (url[, data[, config]] )

• 6 インターセプター<pre class="brush:php;toolbar:false">// 添加请求拦截器 axios.interceptors.request.use(config =&gt; {   // 在发送请求之前做些什么   return config; }, error =&gt; {   // 对请求错误做些什么   return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(response =&gt; {   // 对响应数据做点什么   return response; }, error =&gt; {   // 对响应错误做点什么   return Promise.reject(error); });</pre>6.1 リクエストインターセプトアプリケーション

  axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    let token = sessionStorage.getItem('userTk');
    if (token) {
      config.headers.Authorization = token
    }
    return config
  }, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

6.2 レスポンスインターセプトアプリケーション

axios.interceptors.response.use(response => {
  if (response.data.code === '200') {
    Auth.setToken(sessionStorage.getItem('userId'))
  }
  return response;
},
error => {
  console.warn(error);
  console.warn(error.response);
  if ((error.response.status && error.response.status === 401) || error.response.statusCode === 401) {
    // 已超时
    Auth.removeToken(sessionStorage.getItem('userId'));
    sessionStorage.clear();
    router.replace('/login')
    return Promise.reject('身份已过期,请重新登录！');
  }
  if(error.response && error.response.status === 500)
  return Promise.reject('服务异常，请稍后重试！');
});

推奨学習:「

vue ビデオ チュートリアル

」

以上がvue でサードパーティのリクエストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。