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!

Installationaxios

##1. First check whether npm## is installed # Tools: Tools--> Plug-in installation

2. Check whether

npm is installed. If not, you can go see me. This article: Windows installation node.js uses npm to install vue

3. After installation, open the built-in terminal in the current directory: (Same as the previous steps Check whether the plug-in is installed)

4. Enter in the terminal:

npm install axios Install axios

5. After installation, it is as follows: (axios appears in node_modules)

uniapp Project configurationaxios

• Create

  utils file by yourself Required creation .js file

  
  

##Introduction
• axios

  import Vue from 'vue'
  import axios from 'axios'

The configuration is as follows: (Note: withCredentials allows obtaining cookies and cross-domain back-end configuration cannot be used at the same time. An error will be reported as a reminder. You!)

• 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

Configure the
• main.js

  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

  

pleasant use

axios

• 

  Rendering:

• 

  Original address: https://juejin.cn/post/7005042333288759333

Author: Sunny_Chen

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!