コンテンツ
-
- 以下に示すように、最初に作成する必要のあるディレクトリを確認します。これには、主にapi、utilsのrequest.js、main.js、vue.config.js、first.vueが含まれます。
- 1.axiosをグローバルにインストールします
- 2.APIの下にrequest.jsを作成します。これはカスタムファイル名です。コードは次のとおりです。
- 3. utilsの下にrequest.jsを作成します。これはカスタムファイル名で、コードは次のとおりです。
- 4. vue.config.jsを作成するターゲットは、要求されたドメイン名を表し、クロスドメインコードは次のとおりです。
- 5.ページ呼び出しの使用
以下に示すように、最初に作成する必要のあるディレクトリを確認します。これには、主にapi、utilsのrequest.js、main.js、vue.config.js、first.vueが含まれます。
1.axiosをグローバルにインストールします
- プラグインをダウンロード
npm install axios --save
2.次に、main.jsにグローバルにマウントします
import axios from 'axios'
Vue.prototype.$axios = axios
2.APIの下にrequest.jsを作成します。これはカスタムファイル名です。コードは次のとおりです。
説明
export function getCase() {
return axios.get('/api/case')
}
get（'/ api / case'）はgetリクエストを表します/ api/caseはインターフェースアドレスを表します完全なリクエストインターフェースはbaseURL+アドレス
https://baidu.com/api/caseです
ファイルコードは次のとおりです。
import axios from 'axios'
// 案例!!!!!
export function getCase() {
return axios.get('/api/case')
}
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 请求拦截器
axios.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
})
// 响应拦截器
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error);
})
// 封装axios的post请求
export function fetch(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
})
.catch((error) => {
reject(error);
})
})
}
export default {
mockdata(url, params) {
return fetch(url, params);
}
}
3. utilsの下にrequest.jsを作成します。これはカスタムファイル名で、コードは次のとおりです。
主な追加はこれであることに注意してください：baseURLを検索：要求する必要があるものを追加し
域名、.comで終わります（例：https ：//baidu.com/）
次のファイルもダウンロードする必要があります
npm install js-md5 --save
npm install element-ui --save
import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import md5 from 'js-md5'
var getId = () => {
return localStorage.getItem('userId');
}
var getToken = () => {
return localStorage.getItem('token');
}
var showErr = true
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: 'https://baidu.com',
// 超时
timeout: 10000
})
// request拦截器
service.interceptors.request.use(config => {
if (config && config.data && 'showErr' in config.data) {
showErr = config.data.showErr
}
if (config.method === 'post' && !config.data) {
config.data = {}
config.data.aid = getId()
config.data.t = new Date().getTime()
} else if (config.method === 'post' && config.data) {
config.data.aid = getId()
config.data.t = new Date().getTime()
}
if (config.method === 'post') {
config.transformRequest = (data, headers) => {
let req = JSON.stringify(data)
let token = getToken()
let sign = md5(req + token)
console.log(req + token)
config.headers['sign'] = sign
return req
}
}
if (config.method === 'get' && !config.params) {
config.params = {}
config.params.accessToken = getToken()
config.params.timeStamp = new Date().getTime()
} else if (config.method === 'get' && config.params) {
if (!config.params.accessToken) config.params.accessToken = getToken()
config.params.timeStamp = new Date().getTime()
}
// 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];
var part = encodeURIComponent(propName) + "=";
if (value !== null && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
if (value[key] !== null && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']';
let 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 => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code;
// 获取错误信息
//const msg = i18n.t(`errCode.E${code}`)
const msg = res.data.msg
const flag = res.data.flag
if (!flag && (code === 401 || code === 403)) {
MessageBox.confirm(msg, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('LogOut').then(() => {
this.$router.go(0)
})
}).catch(() => { });
return Promise.reject('登录已过期，请重新登陆')
} else if (!flag) {
if (showErr) {
Message({
message: msg,
type: 'error'
})
}
return Promise.reject(new Error(msg))
} else {
return res.data
}
},
error => {
console.log('err' + 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)
}
)
service.version = 'v1'
export default service
4. vue.config.jsを作成するターゲットは、要求されたドメイン名を表し、クロスドメインコードは次のとおりです。
module.exports = {
publicPath: './',
lintOnSave: false,
devServer: {
port: 8089, // 启动端口
open: false, // 启动后是否自动打开网页
proxy: {
'/api': {
target: 'https://baidu.com', //
secure: true, //接受对方是https的接口
ws: true, // 是否启用websockets
changeOrigin: true, //是否允许跨越
pathRewrite: {
'^/api': '/' //将你的地址代理位这个 /api 接下来请求时就使用这个/api来代替你的地址
},
}
},
}
}
5.ページ呼び出しの使用
<script>
import {
getCase } from "../api/request";
export default {
mounted(){
this.getList()
},
methods:{
// getCase({}) 中括号里面加的是需要的传的参数
getList(){
getCase({
}).then(res =>{
console.log(res); // 得到的数据ok~~~
})
}
}
}
</script>
記事が良いと感じたら、必ず注意を払い、注意を払い、収集してください。間違いがあれば訂正してください。転載が必要な場合は、出典を明記してください。ありがとうございます。！！