uniappプロジェクトにaxiosを導入する方法を詳しく解説

次の uniapp チュートリアル コラムでは、uniapp プロジェクトに axios を導入する方法を紹介し、withCredentials を使用すると、同時に使用できない Cookie とバックエンド構成を取得できるという基本的な知識を理解します。ドメイン。皆さんのお役に立てば幸いです。助けてください!

#インストールaxios

npm## がインストールされているかどうかを確認します。 # ツール: ツール --> プラグインのインストール

npm がインストールされているかどうかを確認します。インストールされていない場合は、この記事: Windows インストール node.js は npm を使用して vue をインストールします

4. ターミナルに次のように入力します: npm install axios axios をインストールします

5 インストール後は次のようになります: (axios は、node_modules に表示されます)

#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

  ログイン後にコピー

  

楽しい使用

• レンダリング:

• 元のアドレス: https://juejin.cn/post/7005042333288759333

著者: Sunny_Chen

プログラミング関連の知識については、

プログラミング ビデオ

をご覧ください。 ！

以上がuniappプロジェクトにaxiosを導入する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。