##このチュートリアルの動作環境: Windows 10 システム、vue3 バージョン、DELL G3コンピューターVue はサードパーティのリクエストを実装します: 1. "import axios from 'axios';" を通じて axios をインポートします; 2. プロトタイプ チェーンに axios を配置します; 3. "axios . interceptors.request.use(config => {...}".
vue はサードパーティのリクエストをどのように実装しますか?
vue でのサードパーティ データのリクエスト --axios
1 axios - >Based on Promise object->async & await2 create Phase->Return Promise object->返されたデータは直接分解可能 [データ処理]import axios from 'axios'; Vue.prototype.axios = axios;
axios.request(config)
axios.get(url[, config])
#axios.put(url[, data[, config]])
axios.patch (url[, data[, config]] )
6 インターセプター<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});</pre><div class="contentsignin">ログイン後にコピー</div></div>
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); });
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 でサードパーティのリクエストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。