91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

詳解axios在vue中的簡單配置與使用

發布時間:2020-08-21 16:03:09 來源:腳本之家 閱讀:189 作者:NowTheFuture 欄目:web開發

一、axios 簡介

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,它本身具有以下特征:

  • 從瀏覽器中創建 XMLHttpRequest
  • 從 node.js 發出 http 請求
  • 支持 Promise API
  • 攔截請求和響應
  • 轉換請求和響應數據
  • 取消請求
  • 自動轉換JSON數據
  • 客戶端支持防止 CSRF/XSRF

二、引入方式:

npm:

$ npm install axios
//淘寶源
$ cnpm install axios

bower:

$ bower install axios

cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三、vue中axios的配置

之前那個開源項目一開始就打算用axios,在網上找了好多文章與攻略,發現好多都不太詳細,所以打算自己動手配置一個,(不要慫,擼起袖子就是干)。

我的配置:

import axios from 'axios'
import qs from 'qs'
import * as _ from '../util/tool'
axios.defaults.timeout = 5000;            //響應時間
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';      //配置請求頭
axios.defaults.baseURL = '你的接口地址';  //配置接口地址
//POST傳參序列化(添加請求攔截器)
axios.interceptors.request.use((config) => {
 //在發送請求之前做某件事
  if(config.method === 'post'){
    config.data = qs.stringify(config.data);
  }
  return config;
},(error) =>{
   _.toast("錯誤的傳參", 'fail');
  return Promise.reject(error);
});
//返回狀態判斷(添加響應攔截器)
axios.interceptors.response.use((res) =>{
 //對響應數據做些事
  if(!res.data.success){
    // _.toast(res.data.msg);
    return Promise.reject(res);
  }
  return res;
}, (error) => {
  _.toast("網絡異常", 'fail');
  return Promise.reject(error);
});
//返回一個Promise(發送post請求)
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}

四、vue中使用配置好的axios

export default {
  /**
   * 用戶登錄
   */
  Login(params) {
    return fetch('/users/api/userLogin', params)
  }, 
  /**
   * 用戶注冊
   */
  Regist(params) {
    return fetch('/users/api/userRegist', params)
  },
  /**
   * 發送注冊驗證碼
   */
  RegistVerifiCode(tellphone) {
    return fetch('/users/api/registVerifiCode', {tellphone: tellphone})
  },
  ......
}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

于都县| 益阳市| 通城县| 长沙市| 金华市| 福清市| 东乌珠穆沁旗| 朝阳市| 嘉黎县| 进贤县| 金塔县| 衡阳市| 牙克石市| 台南市| 合肥市| 卓尼县| 新丰县| 新竹县| 西吉县| 二连浩特市| 德保县| 济南市| 崇阳县| 荣成市| 德钦县| 平远县| 湘潭市| 朝阳市| 抚松县| 濉溪县| 双江| 陆丰市| 宣武区| 鄂托克旗| 临泽县| 桐柏县| 高碑店市| 宁陕县| 伊川县| 泽州县| 沐川县|