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

 

在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据

报错截图如下

报错内容：

{"message": "Network Error","name": "Error","stack": "Error: Network Error
 at FtD3.t.exports (http://***********************/app.7550e716e1ecacaa7e6c.js:45:398050)
 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);}},