axios({
    url:'/user',                            //  `url`是服務(wù)器鏈接，用來(lái)請(qǐng)求用
    method:`get`,                           //  `method`是發(fā)起請(qǐng)求時(shí)的請(qǐng)求方法
    baseURL:'http://some-domain.com/api/',  //  `baseURL`如果`url`不是絕對(duì)地址，那么將會(huì)加在其前面。當(dāng)axios使用相對(duì)地址時(shí)這個(gè)設(shè)置非常方便
 
    transformRequest:[function(data){       //  `transformRequest`允許請(qǐng)求的數(shù)據(jù)在傳到服務(wù)器之前進(jìn)行轉(zhuǎn)化。只適用于`PUT`,`GET`,`PATCH`方法。數(shù)組中的最后一個(gè)函數(shù)必須返回一個(gè)字符串，一個(gè)`ArrayBuffer`,或者`Stream`
        //依自己的需求對(duì)請(qǐng)求數(shù)據(jù)進(jìn)行處理
        return data;
    }],
    transformResponse:[function(data){      //  `transformResponse`允許返回的數(shù)據(jù)傳入then/catch之前進(jìn)行處理
        //依需要對(duì)數(shù)據(jù)進(jìn)行處理
        return data;
    }],  
    headers:{'X-Requested-with':'XMLHttpRequest'},//`headers`是自定義的要被發(fā)送的頭信息
    params:{ //`params`是請(qǐng)求連接中的請(qǐng)求參數(shù)，必須是一個(gè)純對(duì)象，或者URLSearchParams對(duì)象
        ID:12345
    },
    paramsSerializer: function(params){//`paramsSerializer`是一個(gè)可選的函數(shù)，是用來(lái)序列化參數(shù)，例如：（https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
        return Qs.stringify(params,{arrayFormat:'brackets'})
    },
    data:{//`data`是請(qǐng)求提需要設(shè)置的數(shù)據(jù)，只適用于應(yīng)用的'PUT','POST','PATCH'，請(qǐng)求方法。當(dāng)沒(méi)有設(shè)置`transformRequest`時(shí)，必須是以下其中之一的類(lèi)型（不可重復(fù)？）：-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams。僅瀏覽器：FormData,File,Blob。僅Node：Stream
        firstName:'fred'
    },
    //`timeout`定義請(qǐng)求的時(shí)間，單位是毫秒。
    //如果請(qǐng)求的時(shí)間超過(guò)這個(gè)設(shè)定時(shí)間，請(qǐng)求將會(huì)停止。
    timeout:1000,
    //`withCredentials`表明是否跨域請(qǐng)求，
    //應(yīng)該是用證書(shū)
    withCredentials:false //默認(rèn)值
    //`adapter`適配器，允許自定義處理請(qǐng)求，這會(huì)使測(cè)試更簡(jiǎn)單。
    //返回一個(gè)promise，并且提供驗(yàn)證返回（查看[response docs](#response-api)）
    adapter:function(config){
        /*...*/
    },
    //`auth`表明HTTP基礎(chǔ)的認(rèn)證應(yīng)該被使用，并且提供證書(shū)。
    //這個(gè)會(huì)設(shè)置一個(gè)`authorization` 頭（header），并且覆蓋你在header設(shè)置的Authorization頭信息。
    auth:{
        username:'janedoe',
        password:'s00pers3cret'
    },
    //`responsetype`表明服務(wù)器返回的數(shù)據(jù)類(lèi)型，這些類(lèi)型的設(shè)置應(yīng)該是
    //'arraybuffer','blob','document','json','text',stream'
    responsetype:'json',
    //`xsrfHeaderName` 是http頭（header）的名字，并且該頭攜帶xsrf的值
    xrsfHeadername:'X-XSRF-TOKEN'，//默認(rèn)值
    //`onUploadProgress`允許處理上傳過(guò)程的事件
    onUploadProgress: function(progressEvent){
        //本地過(guò)程事件發(fā)生時(shí)想做的事
    },
    //`onDownloadProgress`允許處理下載過(guò)程的事件
    onDownloadProgress: function(progressEvent){
        //下載過(guò)程中想做的事
    },
    //`maxContentLength` 定義http返回內(nèi)容的最大容量
    maxContentLength: 2000,
    //`validateStatus` 定義promise的resolve和reject。
    //http返回狀態(tài)碼，如果`validateStatus`返回true（或者設(shè)置成null/undefined），promise將會(huì)接受；其他的promise將會(huì)拒絕。
    validateStatus: function(status){
        return status >= 200 &;&; stauts < 300;//默認(rèn)
    },
    //`httpAgent` 和 `httpsAgent`當(dāng)產(chǎn)生一個(gè)http或者h(yuǎn)ttps請(qǐng)求時(shí)分別定義一個(gè)自定義的代理，在nodejs中。
    //這個(gè)允許設(shè)置一些選選個(gè)，像是`keepAlive`--這個(gè)在默認(rèn)中是沒(méi)有開(kāi)啟的。
    httpAgent: new http.Agent({keepAlive:treu}),
    httpsAgent: new https.Agent({keepAlive:true}),
    //`proxy`定義服務(wù)器的主機(jī)名字和端口號(hào)。
    //`auth`表明HTTP基本認(rèn)證應(yīng)該跟`proxy`相連接，并且提供證書(shū)。
    //這個(gè)將設(shè)置一個(gè)'Proxy-Authorization'頭(header)，覆蓋原先自定義的。
    proxy:{
        host:127.0.0.1,
        port:9000,
        auth:{
            username:'cdd',
            password:'123456'
        }
    },
    //`cancelTaken` 定義一個(gè)取消，能夠用來(lái)取消請(qǐng)求
    //（查看 下面的Cancellation 的詳細(xì)部分）
    cancelToke: new CancelToken(function(cancel){
    })
});

//全局main.js中已引入axios, 設(shè)置baseURL,故寫(xiě)this.axios ,this.axios({url:'xxx' ,medthod:get} ) medthod可以寫(xiě)到前面去 ,全局中baseURL設(shè)置了基礎(chǔ)路徑, url中寫(xiě)基礎(chǔ)路徑后面的請(qǐng)求部分即可  
   this.axios.get('login',{params:{uname:u,upwd:p}}).then(res=>{
              //8:接收服務(wù)器返回結(jié)果
              //9:如果-1  提示用戶(hù)名和密碼有誤
              //10:如果1  跳轉(zhuǎn)商品列表組件  /Product 
              if(res.data.code==-1){
                  this.$messagebox("消息","用戶(hù)名或密碼有誤");
              }else{
                  this.$toast("登錄成功");
                  this.$router.push("/Product");
              }
           })

axios.post(url, {}); // Content-Type: application/json;charset=UTF-8

axios.post(url, ''); // Content-Type: application/x-www-form-urlencoded

npm install axios --save

 ├── src                             
 │   ├── api                      
 ... ...  ├── axios.js  // 請(qǐng)求配置文件，axios的配置都在這里進(jìn)行
          └── index.js  // 接口函數(shù)封裝，方便外部調(diào)用接口

/* 1.引入文件 */
import axios from 'axios'        //引入 axios庫(kù)
import qs from 'qs'              //引入 node中自帶的qs模塊（數(shù)據(jù)格式轉(zhuǎn)換）
 
/* 2.全局默認(rèn)配置 */
let baseURL
// 判斷開(kāi)發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開(kāi)發(fā)環(huán)境
    baseURL = '/api'    // 你設(shè)置的本地代理請(qǐng)求（跨域代理），下文會(huì)詳細(xì)介紹怎么進(jìn)行跨域代理
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測(cè)試環(huán)境
        baseURL = 'http://sw.apitest.com'
    } else {                                  // 正式環(huán)境
        baseURL = 'http://sw.api.com'
    }
}
// 配置axios的屬性
axios.defaults.timeout = 6000;    // 請(qǐng)求超時(shí)時(shí)間1分鐘                  
axios.defaults.baseURL =baseURL; // 你的接口地址 
axios.defaults.responseType="json";
axios.defaults.withCredentials=false;  是否允許帶cookie這些
.....
 
/*你也可以創(chuàng)建一個(gè)實(shí)例，然后在實(shí)例中配置相關(guān)屬性，此方法和上面的方法一樣，寫(xiě)法不同，怎么用隨個(gè)人
*喜好，我比較喜歡用這種方法，如下：
*/
const Axios = axios.create({
	baseURL:baseURL , 		      // 后臺(tái)服務(wù)地址
	timeout: 60000, 		      // 請(qǐng)求超時(shí)時(shí)間1分鐘
	responseType: "json",
	withCredentials: false    // 是否允許帶cookie這些
});


 
/* 3.設(shè)置攔截器 */  
/*如果不是用創(chuàng)建實(shí)例的方式配置，那么下面的Axios都要換成axios,也就是文件開(kāi)頭你用import引入axios
時(shí)定義的變量*/
Axios .interceptors.request.use((config) => {
    發(fā)送請(qǐng)求前進(jìn)行攔截
    //  可在此處配置請(qǐng)求頭信息
	config.headers["appkey"] ="...";
	config.headers["token"] ="...";
           ...
 	if (config.method == "post") {
  /*數(shù)據(jù)轉(zhuǎn)換: axios post方式默認(rèn)是json格式提交數(shù)據(jù)，如果使用application/x-www-form-urlencoded數(shù)據(jù)格式提交，要用qs.stringify()進(jìn)行轉(zhuǎn)換,個(gè)人建議不在攔截器中全局配置，因?yàn)椴粔蜢`活，還有一點(diǎn)是，如果
設(shè)置了重新請(qǐng)求的配置，那么重新請(qǐng)求時(shí)，請(qǐng)求體中的config里面的傳參就會(huì)被再次進(jìn)行qs.stringify()轉(zhuǎn)
換，會(huì)使得參數(shù)丟失，造成請(qǐng)求失敗。*/
 		config.data = qs.stringify(config.data)
 	}
	return config;
  },(error) =>{
    //console.log("錯(cuò)誤的傳參", 'fail');
    return Promise.reject(error)
  })
Axios .interceptors.response.use((res) =>{
   請(qǐng)求響應(yīng)后攔截
   if(res.status == 200){                       // 對(duì)響應(yīng)數(shù)據(jù)做些事
       //alert("提交成功")
       return Promise.resolve(res)
    }
    return res;
 }, (error) => {
    
   //alert("網(wǎng)絡(luò)異常!") 404等問(wèn)題可以在這里處理
   return Promise.reject(error)
 })
export default Axios 

import Axios from "./axios"  // 導(dǎo)入配置好的axios文件
// 封裝axios請(qǐng)求函數(shù)，并用export導(dǎo)出
export function getItemList(datas) {
    return Axios({
	url: "/api/getItemList",
	method: "post",
	headers: {
	    'Content-Type': 'application/x-www-form-urlencoded' //設(shè)置請(qǐng)求頭請(qǐng)求格式form
	},
	data: datas
    })
}
export function getItem(datas) {
    return Axios({
	url: "/api/getItem",
	method: "post",
	headers: {
	    'Content-Type': 'application/json' //設(shè)置請(qǐng)求頭請(qǐng)求格式為json
	},
	data: datas
    })
}
export function getItemInfo(datas) {
    return Axios({
	url: "/api/getItemInfo"+datas,
        method: "get",
    })
}

<template>
  <div class="home">
 
  </div>
</template>
<script>
import qs from 'qs' //引入 node中自帶的qs模塊（對(duì)application/x-www-form-urlencoded數(shù)據(jù)格式轉(zhuǎn)換）
import { getItemList,getItemInfo } from '@/api'  // 導(dǎo)入 封裝的請(qǐng)求函數(shù)
export default {
  name: 'HelloWorld',
  data () {
    return {
        getItemListData:{},// getItemList  接口入?yún)?
        getItemInfoData:{  // getItemInfo  接口入?yún)?
            page:1,
            size:10
        }, 
    }
  },
  created(){
    getItemList(qs.stringify(this.getItemListData)).then(res=>{
        //這個(gè)接口數(shù)據(jù)是application/x-www-form-urlencoded，所以參數(shù)要進(jìn)行qs轉(zhuǎn)化
        // 請(qǐng)求返回?cái)?shù)據(jù)
    }).catch(err=>{
        // 請(qǐng)求失敗執(zhí)行
    })
    getItem(this.getItemListData).then(res=>{
        // 請(qǐng)求返回?cái)?shù)據(jù)
    }).catch(err=>{
        // 請(qǐng)求失敗執(zhí)行
    })
    getItemInfo(`?page=${this.getItemInfoData.page}&size=${this.getItemInfoData.size}`).then(res=>{
        // get請(qǐng)求，url傳值。用的是字符串模板傳值
        // 請(qǐng)求返回?cái)?shù)據(jù)
    }).catch(err=>{
        // 請(qǐng)求失敗執(zhí)行
    })
  }
}
</script> 

/*---------------------------(1) 打開(kāi)config/index.js-------------------------------------------*/
//將文件中的該項(xiàng)配置  proxyTable:{} 修改成如下配置
proxyTable: {
  '/aaa': { // 這個(gè)aaa 要與 axios.js 文件中的 baseURL 值對(duì)應(yīng)
    target: 'http://sw.api.com',      // 你接口的域名
    changeOrigin: true,
    pathRewrite:{
        '^/aaa':''
    }
  }        
}
 
/*---------------------------(2) api/axios.js 文件的基路徑配置,開(kāi)發(fā)環(huán)境中的baseURL -------------------------------*/
let baseURL
// 判斷開(kāi)發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開(kāi)發(fā)環(huán)境
    baseURL = '/aaa'    // 對(duì)應(yīng)上面的代理名 aaa 
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測(cè)試環(huán)境
        baseURL = 'http://sw.apitest.com'
    } else {                                  // 正式環(huán)境
        baseURL = 'http://sw.api.com'
    }
}

 ├── src                             
 │   ├── api                      
 ... ...  ├── axios.js
          └── index.js
          ├── axios1.js
          └── index1.js

/*---------------------------打開(kāi)config/index.js-------------------------------------------*/
//將文件中的該項(xiàng)配置  proxyTable:{} 修改成如下配置
proxyTable: {
  // 第一個(gè)后臺(tái)接口域名代理
  '/aaa': { // 這個(gè)aaa 要與 axios.js 文件中的 baseURL 值對(duì)應(yīng)
    target: 'http://sw.api.com',      // 你第一個(gè)接口的域名
    changeOrigin: true,
    pathRewrite:{
        '^/aaa':''
    }
  },
   // 第二個(gè)后臺(tái)接口域名代理
  '/bbb': { // 這個(gè)bbb要與 axios1.js 文件中的 baseURL 值對(duì)應(yīng)
    target: 'http://sg.api.com',      // 你第二個(gè)接口的域名
    changeOrigin: true,
    pathRewrite:{
        '^/aaa':''
    }
  },      
}
/*---------------------------(1) api/axios.js 文件的基路徑配置,開(kāi)發(fā)環(huán)境中的baseURL ----------------------------*/
let baseURL
// 判斷開(kāi)發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開(kāi)發(fā)環(huán)境
    baseURL = '/aaa'    // 對(duì)應(yīng)上面的第一個(gè)代理名 aaa 
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測(cè)試環(huán)境
        baseURL = 'http://sw.apitest.com'
    } else {                                  // 正式環(huán)境
        baseURL = 'http://sw.api.com'
    }
}
 
/*---------------------------(2) api/axios1.js 文件的基路徑配置,開(kāi)發(fā)環(huán)境中的baseURL ----------------------------*/
let baseURL
// 判斷開(kāi)發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開(kāi)發(fā)環(huán)境
    baseURL = '/bbb'    // 對(duì)應(yīng)上面的第二個(gè)代理名 bbb
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測(cè)試環(huán)境
        baseURL = 'http://sg.apitest.com'
    } else {                                  // 正式環(huán)境
        baseURL = 'http://sg.api.com'
    }