vue實作第三方請求的方法:1、透過「import axios from 'axios';」導入axios;2、將axios放在原型鏈上;3、新增請求攔截器,程式碼如「axios .interceptors.request.use(config => {...}”。
#本教學操作環境:Windows10系統、vue3版、DELL G3電腦
vue怎麼實現第三方請求?
在vue中請求第三方資料--axios
import axios from 'axios'; Vue.prototype.axios = axios;
axios.request(config)
// 添加请求拦截器 axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(response => { // 对响应数据做点什么 return response; }, error => { // 对响应错误做点什么 return Promise.reject(error); });
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中文網其他相關文章!