1. axios について初めて知る
Axios は、node.js とブラウザーで動作する Promise ベースのネットワーク リクエスト ライブラリであり、同型です (つまり、同じコード セットがブラウザーと Node.js で実行できます)。サーバー側ではネイティブのnode.js httpモジュールを使用し、クライアント側（ブラウザ側）ではXMLHttpRequestを使用します。
- 主な特徴：
ブラウザから XMLHttpRequest を作成する
node.js から http リクエストを作成するリクエストとレスポンスをインターセプト
する Promise API をサポートするリクエストとレスポンスのデータを変換するリクエストをキャンセルする JSON データを自動的に変換するクライアント側が XSRF に対する防御をサポートする
2.axiosをインストールする
- 1.axiosをインストールする
npm install axios
- 2. axios をマウントする
main.js ファイルに、次の内容を追加します。
import axios from 'axios'
Vue.prototype.$http= axios
this.$http を通じてリクエストを開始できます。
3. ネットワークプロキシを構成する
const {
defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
// 指定使用的ip地址，默认为localhost，如果使用'0.0.0.0'则可以被外部访问
host: '0.0.0.0',
// 指定服务监听的端口号
port: 9527,
// 代理
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
}
})
このうち、 process.env.VUE_APP_BASE_API は、マルチ環境構成ファイル (.env.development ファイルなど) で構成したリクエスト パスです。
# Asurplus管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'
次に、送信するリクエスト パスは次のとおりです。
http://localhost:9527/dev-api/xxx
4.axiosを使用する
httpTest() {
this.$http.get(process.env.VUE_APP_BASE_API + '/test').then(res => {
console.log(res)
})
}
私が得た答えは次のとおりです。
{
"data":{
"msg":"操作成功",
"code":200,
"data":"this is data"
},
"status":200,
"statusText":"OK",
"headers":{
"connection":"close",
"content-encoding":"gzip",
"content-type":"application/json;charset=UTF-8",
"date":"Mon, 03 Apr 2023 06:47:10 GMT",
"transfer-encoding":"chunked",
"vary":"Accept-Encoding",
"x-powered-by":"Express"
},
"config":{
"transitional":{
"silentJSONParsing":true,
"forcedJSONParsing":true,
"clarifyTimeoutError":false
},
"adapter":[
"xhr",
"http"
],
"transformRequest":[
null
],
"transformResponse":[
null
],
"timeout":0,
"xsrfCookieName":"XSRF-TOKEN",
"xsrfHeaderName":"X-XSRF-TOKEN",
"maxContentLength":-1,
"maxBodyLength":-1,
"env":{
},
"headers":{
"Accept":"application/json, text/plain, */*"
},
"method":"get",
"url":"/dev-api/test"
},
"request":{
}
}
ネットワークの応答状況や情報も一緒に取得していることがわかりますが、通常のビジネスロジック処理を行うためには毎回httpStatusが200かどうかを判断する必要があり、非常に面倒です。
5. リクエストインターセプターとレスポンスインターセプターを設定する
import axios from 'axios'
import {
Message} from 'element-ui'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 10000
})
// request拦截器
service.interceptors.request.use(config => {
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?';
for (const propName of Object.keys(config.params)) {
const value = config.params[propName];
const part = encodeURIComponent(propName) + "=";
if (value !== null && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
let params = propName + '[' + key + ']';
const subPart = encodeURIComponent(params) + "=";
url += subPart + encodeURIComponent(value[key]) + "&";
}
} else {
url += part + encodeURIComponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = {
};
config.url = url;
}
return config
}, error => {
Promise.reject(error)
})
// response拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = res.data.msg
if (200 !== code) {
Message({
message: msg,
type: 'error'
})
return Promise.reject(new Error(msg))
}
// 返回响应信息
else {
return res.data
}
},
error => {
let {
message} = error;
if (message === "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
- 1. リクエストインターセプタ
1. デフォルトのリクエスト ヘッダーの内容: Content-Type=application/json; charset=utf-8、トークンおよびその他の認証情報を渡す必要がある場合は、それをリクエスト インターセプターに追加できます。 2. デフォルトのリクエスト タイムアウト時間を構成します。 10秒 3.リクエスト
の取得
paramsパラメータが渡された場合、パラメータはリクエストアドレスに?key=value&key1=value1の形式で結合されます。
- 2. 応答インターセプター
1. デフォルトでは、返されるコード = 200 は成功応答であり、応答情報内のデータ オブジェクトが返されます。 2.
リクエスト ビジネス レベルでのエラー応答は、ビジネス応答オブジェクト内のメッセージ情報を直接要求します
。エラーの種類に応じて、要求ネットワーク レベルでのエラー応答が求められます。 応答プロンプト メッセージ
6. パッケージリクエスト
- 1、test.js
import request from '@/utils/request'
export function test(data) {
return request({
url: '/test',
method: 'post',
data: data
})
}
- 2. リクエストを開始する
先ほど設定したリクエスト インターセプターとレスポンス インターセプターを導入します。データは渡す必要があるパラメーターであり、コンポーネントで使用します。
import {
test} from "@/api/test";
methods: {
httpTest() {
test(this.data).then(res => {
console.log(res)
})
}
}
私が得た答えは次のとおりです。
{
"msg":"操作成功",
"code":200,
"data":"this is data"
}
読んで不備がある場合は、メッセージを残してください。！！