下面uniapp教學專欄為大家介紹一下uniapp專案中引入axios的方法，了解withCredentials允許獲取cookie和後端配置的跨域不可同時使用的一些基本知識，希望對大家有所幫助！
axios#1、先檢查是否安裝npm 工具：工具--> 外掛安裝
#2、檢查是否安裝npm，如果沒有可以去看我的這篇文章：windows安裝node.js用npm安裝vue
#3、安裝後在目前目錄下開啟內建終端：（和前幾步一樣檢查外掛程式安裝與否）
4、在終端機輸入：npm install axios 安裝axios
5、安裝後如下所示：（node_modules 出現axios）
#uniapp 專案設定axios#建立utils 檔案按自己所需建立.js 檔案
# 介紹axios
import Vue from 'vue' import axios from 'axios'
設定如下：（注意：withCredentials允許取得cookie 和後端配置的跨域不可同時使用，會報錯哦提醒你了！）
import Vue from 'vue'
import axios from 'axios'
// create an axios instance
const service = axios.create({
baseURL: 'https://www.yongjiachen.top/jccrm', // url = base url + request url
//withCredentials: true, // send cookies when cross-domain requests 注意：withCredentials和后端配置的cross跨域不可同时使用
timeout: 6000, // request timeout
crossDomain: true
})
// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
config => {
// if (store.state.token) {
// // 给请求头添加user-token
// config.headers["user-token"] = store.state.token;
// }
console.log('请求拦截成功')
return config;
},
error => {
console.log(error); // for debug
return Promise.reject(error);
}
);
//配置成功后的拦截器
service.interceptors.response.use(res => {
if (res.data.status== 200) {
return res.data
} else {
return Promise.reject(res.data.msg);
}
}, error => {
if (error.response.status) {
switch (error.response.status) {
case 401:
break;
default:
break;
}
}
return Promise.reject(error)
})
// 在main.js中放入这段自定义适配器的代码，就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie
axios.defaults.adapter = function(config) {
return new Promise((resolve, reject) => {
console.log(config)
var settle = require('axios/lib/core/settle');
var buildURL = require('axios/lib/helpers/buildURL');
uni.request({
method: config.method.toUpperCase(),
url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
header: config.headers,
data: config.data,
dataType: config.dataType,
responseType: config.responseType,
sslVerify: config.sslVerify,
complete: function complete(response) {
console.log("执行完成：",response)
response = {
data: response.data,
status: response.statusCode,
errMsg: response.errMsg,
header: response.header,
config: config
};
settle(resolve, reject, response);
}
})
})
}
export default service在專案根目錄的main.js 設定引入全域axios
// 引入封装后的axios
import axios from './utils/request/request.js'
/**
* 给Vue函数添加一个原型属性$axios 指向Axios
* 这样做的好处是在vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法了
* 在.vue中使用，this.$axios.get
* @param {Object} config
*/
Vue.prototype.$axios = axios#愉快的使用axios
#效果圖：
##原文網址：https://juejin.cn/post/7005042333288759333作者：Sunny_Chen
######更多程式設計相關知識，請造訪更多程式相關知識，請造訪：###程式設計影片###！ ！ ###以上是詳解uniapp專案中如何引入axios的詳細內容。更多資訊請關注PHP中文網其他相關文章！
