Home >Web Front-end >uni-app >Detailed explanation of how to introduce axios in the uniapp project
The following uniapp tutorial column will introduce to you the method of introducing axios in the uniapp project, and understand some basic knowledge that withCredentials allows to obtain cookies and back-end configurations that cannot be used simultaneously across domains. I hope it will be useful to everyone. help!
axios
##1. First check whether npm## is installed # Tools: Tools--> Plug-in installation
npm is installed. If not, you can go see me. This article: Windows installation node.js uses npm to install vue
4. Enter in the terminal:
npm install axios Install axios
axios
utils file by yourself Required creation .js
file
import Vue from 'vue' import axios from 'axios'
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
in the project root directory to introduce global 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
Original address: https://juejin.cn/post/7005042333288759333
For more programming-related knowledge, please visit :Programming Video
! !
The above is the detailed content of Detailed explanation of how to introduce axios in the uniapp project. For more information, please follow other related articles on the PHP Chinese website!