?

?

注意！！！（修改于2020年7月18日）

?

在安卓9.0以下或者IOS10.X以下手機端H5頁面不支持，在這兩種情況下的系統只能使用ajax或者原生js請求后臺數據

報錯截圖如下

報錯內容：

{"message": "Network Error","name": "Error","stack": "Error: Network Error\n at FtD3.t.exports (http://***********************/app.7550e716e1ecacaa7e6c.js:45:398050)\n at XMLHttpRequest.f.onerror" +" (http://***********************js/app.7550e716e1ecacaa7e6c.js:7:94743)","config": {"url": "http://***********************.do","method": "post","data": "{\"url\":\"http%3A%2F%2F*************%2Fprojects%2Fzyb%2F\"}","headers": {"Accept": "application/json, text/plain, */*", "Content-Type": "application/json", "type": "requestBody"},"transformRequest": [null],"transformResponse": [null],"timeout": 600000,"xsrfCookieName": "XSRF-TOKEN","xsrfHeaderName": "X-XSRF-TOKEN","maxContentLength": -1}
};

更正一下！ （修正于2020年7月23日）

并不完全是因為用axios導致部分低版本安卓手機和IOS系統出現報錯的，而是由于請求體格式類型沒有使用application/x-www-form-urlencoded，且header里面不能有除了content-type以外的任何類型參數，即便是要傳本地登錄的token值，也只能在請求體body里面傳輸，否則依然會出現上面的報錯提示

?src/service/contactService.js

export default {// 添加聯系人insertContactList: {method: "post",url: 'insert'},// 刪除聯系人deleteContactList: {method: "delete",url: 'delete'},// 修改聯系人updateContactList: {method: "put",url: 'update'},// 查詢聯系人列表selectContactList: {method: "get",url: 'select'}
}

??src/service/http.js

import axios from 'axios';
import service from './contactService'
import { Loading, Message } from 'element-ui';var loading = {_load: null,show() {this._load = Loading.service({ text: '拼命加載中...' }); //開始加載動畫},hide() {this._load.close(); //結束加載動畫}
};//service 循環遍歷輸出不同的方法請求
let instance = axios.create({baseURL: 'http://127.0.0.1:9999/api/',timeout: 10000,
})
const Http = {}; //包裹請求方法的容器
for (let key in service) {let api = service[key]Http[key] = async function(params, //請求參數isFormData = false, //是否為表單請求config = {} //配置參數) {let newParams = {}let response = {};if (params && isFormData) {for (let i in params) {newParams.append(i, params[i]);}} else {newParams = params;}// 不同的請求判斷switch (api.method) {case 'put':case 'post':case 'patch':try {response = await instance[api.method](api.url, newParams, config);} catch (err) {response = err;}break;case 'get':case 'delete':config.params = newParams;try {response = await instance[api.method](api.url, config);} catch (err) {response = err;}break;}return response;}
}// 攔截器的添加
// 請求攔截器
instance.interceptors.request.use(config => {// 請求中的加載提示loading.show();return config;}, err => {// 請求錯誤loading.hide();Message.error(JSON.stringify(err) + '請求錯誤，請稍候重試！');})// 響應攔截器
instance.interceptors.response.use(res => {// 響應成功loading.hide();return res.data;
}, err => {// 響應錯誤loading.hide();Message.error(JSON.stringify(err) + '響應錯誤，請稍候重試！');
})export default Http;

??src/main.js

…import Http from './service/http';
Vue.prototype.$Http = Http;…

src/components/contact.js

  methods: {// 獲取聯系人列表async refreshList() {let res = await this.$Http.selectContactList();console.log(res);}},

總結

以上是生活随笔為你收集整理的进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。