設(shè)置攔截器封裝axios的get post請求：
初始化項(xiàng)目后颠放，我們在src目錄下創(chuàng)建utils文件夾伪朽，內(nèi)包含api.js和http.js兩個文件帮毁。
api.js 主要包含我們請求后臺的接口地址溜宽，簡單舉個例子：
let api = {
home: '/api/home/content',
login: `/api/sso/login`,
...
}
export default api
接下來吉拳，就是封裝axios的http.js：首先我們需要安裝axios的依賴：
yarn add axios -D or npm i axios -D
安裝完成依賴之后，就需要在http.js中引入：
import axios from "axios";
let baseUrl = 'https://192.168.0.125:8085'
// 創(chuàng)建axios實(shí)例适揉，在這里可以設(shè)置請求的默認(rèn)配置
const instance = axios.create({
timeout: 10000, // 設(shè)置超時時間10s
baseURL: baseUrl // 根據(jù)自己配置的反向代理去設(shè)置不同環(huán)境的baseUrl
})
// 文檔中的統(tǒng)一設(shè)置post請求頭留攒。下面會說到post請求的幾種'Content-Type'
instance.defaults.headers.post['Content-Type'] = 'application/json'
/** 添加請求攔截器 **/
instance.interceptors.request.use(config => {
config.headers['token'] = sessionStorage.getItem('token') || ''
return config
}, error => {
// 對請求錯誤做些什么
return Promise.reject(error)
})
/** 添加響應(yīng)攔截器 **/
instance.interceptors.response.use(response => {
// console.log(response)
// 響應(yīng)結(jié)果里的 statusText: ''是我與后臺的約定煤惩，大家可以根據(jù)實(shí)際情況去做對應(yīng)的判斷
if (response.statusText === '') {
return Promise.resolve(response.data)
} else {
return Promise.reject(response.data.message)
}
}, error => {
if (error.response) {
// token或者登陸失效情況下跳轉(zhuǎn)到登錄頁面，根據(jù)實(shí)際情況稼跳，在這里可以根據(jù)不同的響應(yīng)錯誤結(jié)果盟庞，做對應(yīng)的事。這里我以401判斷為例
if (error.response.status === 401) {
//針對框架跳轉(zhuǎn)到登陸頁面
this.props.history.push('/login');
}
return Promise.reject(error)
} else {
return Promise.reject('請求超時, 請刷新重試')
}
})
/* 統(tǒng)一封裝get請求 */
export const get = (url, params, config = {}) => {
return new Promise((resolve, reject) => {
instance({
method: 'get',
url,
params,
...config
}).then(response => {
resolve(response)
}).catch(error => {
reject(error)
})
})
}
/* 統(tǒng)一封裝post請求 */
export const post = (url, data, config = {}) => {
return new Promise((resolve, reject) => {
instance({
method: 'post',
url,
data,
...config
}).then(response => {
resolve(response)
}).catch(error => {
reject(error)
})
})
}
封裝完get post請求之后汤善，我們需要在react的原型鏈上什猖，綁定get和post方法，修改 src/index.js 文件：
import React, { Component } from 'react';
import { get, post } from './utils/http';
import api from './utils/api';
// 注意：Vue 框架是在Vue.prototype原型上綁定红淡，而react不是在React.prototype原型上綁定不狮，而是在Component上綁定
Component.prototype.get = get;
Component.prototype.post = post;
Component.prototype.api = api;
最后就是接口的請求，上一篇文章有所提及在旱，按照要求請求接口即可摇零。
Tips: 在接口的請求過程中，可能會遇到跨域的問題桶蝎，接下來解決跨域的問題：
首先驻仅，跨域我們需要用到 http-proxy-middleware 這個中間件，去設(shè)置代理
yarn add http-proxy-middleware -D or npm i http-proxy-middleware -D
然后我們需要在src目錄下新建setupProxy.js文件：
// 新版舍棄了proxy登渣，采用的是 createProxyMiddleware
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function(app) {
app.use("/api",
createProxyMiddleware({
target: "https://192.168.0.125:8085", // 跨域地址
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
})
);
};
// dva代理設(shè)置
{
"proxy": {
"/apis": {
"target": "https://192.168.0.1:8085", // 跨域地址
"changeOrigin": true,
"pathRewrite": {
"^/apis": ""
}
}
}
}
到此噪服，我們就可以跨域請求后臺接口地址。
