npm install axios; // 安裝axios

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊，用來(lái)序列化post類(lèi)型的數(shù)據(jù)，后面會(huì)提到
// vant的toast提示框組件，大家可根據(jù)自己的ui組件更改。
import { Toast } from 'vant'; 

// 環(huán)境的切換
if (process.env.NODE_ENV == 'development') { 
 axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') { 
 axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') { 
 axios.defaults.baseURL = 'https://www.production.com';
}

axios.defaults.timeout = 10000;

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 先導(dǎo)入vuex,因?yàn)槲覀円褂玫嚼锩娴臓顟B(tài)對(duì)象
// vuex的路徑根據(jù)自己的路徑去寫(xiě)
import store from '@/store/index';

// 請(qǐng)求攔截器axios.interceptors.request.use( 
 config => { 
 // 每次發(fā)送請(qǐng)求之前判斷vuex中是否存在token 
 // 如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token，這樣后臺(tái)根據(jù)token判斷你的登錄情況
 // 即使本地存在token，也有可能token是過(guò)期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷 
 const token = store.state.token; 
 token && (config.headers.Authorization = token); 
 return config; 
 }, 
 error => { 
 return Promise.error(error); 
})

// 響應(yīng)攔截器
axios.interceptors.response.use( 
 response => { 
 // 如果返回的狀態(tài)碼為200，說(shuō)明接口請(qǐng)求成功，可以正常拿到數(shù)據(jù) 
 // 否則的話拋出錯(cuò)誤
 if (response.status === 200) {  
  return Promise.resolve(response); 
 } else {  
  return Promise.reject(response); 
 } 
 }, 
 // 服務(wù)器狀態(tài)碼不是2開(kāi)頭的的情況
 // 這里可以跟你們的后臺(tái)開(kāi)發(fā)人員協(xié)商好統(tǒng)一的錯(cuò)誤狀態(tài)碼 
 // 然后根據(jù)返回的狀態(tài)碼進(jìn)行一些操作，例如登錄過(guò)期提示，錯(cuò)誤提示等等
 // 下面列舉幾個(gè)常見(jiàn)的操作，其他需求可自行擴(kuò)展
 error => {  
 if (error.response.status) {  
  switch (error.response.status) {  
  // 401: 未登錄
  // 未登錄則跳轉(zhuǎn)登錄頁(yè)面，并攜帶當(dāng)前頁(yè)面的路徑
  // 在登錄成功后返回當(dāng)前頁(yè)面，這一步需要在登錄頁(yè)操作。  
  case 401:   
   router.replace({   
   path: '/login',   
   query: { 
    redirect: router.currentRoute.fullPath 
   }
   });
   break;

  // 403 token過(guò)期
  // 登錄過(guò)期對(duì)用戶進(jìn)行提示
  // 清除本地token和清空vuex中token對(duì)象
  // 跳轉(zhuǎn)登錄頁(yè)面  
  case 403:
   Toast({
   message: '登錄過(guò)期，請(qǐng)重新登錄',
   duration: 1000,
   forbidClick: true
   });
   // 清除token
   localStorage.removeItem('token');
   store.commit('loginSuccess', null);
   // 跳轉(zhuǎn)登錄頁(yè)面，并將要瀏覽的頁(yè)面fullPath傳過(guò)去，登錄成功后跳轉(zhuǎn)需要訪問(wèn)的頁(yè)面 
   setTimeout(() => {   
   router.replace({    
    path: '/login',    
    query: { 
    redirect: router.currentRoute.fullPath 
    }   
   });   
   }, 1000);   
   break;

  // 404請(qǐng)求不存在
  case 404:
   Toast({
   message: '網(wǎng)絡(luò)請(qǐng)求不存在',
   duration: 1500,
   forbidClick: true
   });
   break;
  // 其他錯(cuò)誤，直接拋出錯(cuò)誤提示
  default:
   Toast({
   message: error.response.data.message,
   duration: 1500,
   forbidClick: true
   });
  }
  return Promise.reject(error.response);
 }
 } 
});

/**
 * get方法，對(duì)應(yīng)get請(qǐng)求
 * @param {String} url [請(qǐng)求的url地址]
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
 */
export function get(url, params){ 
 return new Promise((resolve, reject) =>{ 
 axios.get(url, {  
  params: params 
 }).then(res => {
  resolve(res.data);
 }).catch(err =>{
  reject(err.data) 
 }) 
});}

/** 
 * post方法，對(duì)應(yīng)post請(qǐng)求 
 * @param {String} url [請(qǐng)求的url地址] 
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)] 
 */
export function post(url, params) {
 return new Promise((resolve, reject) => {
  axios.post(url, QS.stringify(params))
 .then(res => {
  resolve(res.data);
 })
 .catch(err =>{
  reject(err.data)
 })
 });
}

/** 
 * api接口統(tǒng)一管理
 */
import { get, post } from './http'

http://www.baiodu.com/api/v1/users/my_address/address_edit_before

export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);

import { apiAddress } from '@/request/api';// 導(dǎo)入我們的api接口
export default {  
 name: 'Address', 
 created () {
  this.onLoad();
 },
 methods: {   
  // 獲取數(shù)據(jù)   
  onLoad() {
   // 調(diào)用api接口，并且提供了兩個(gè)參數(shù)    
   apiAddress({     
    type: 0,     
    sort: 1    
   }).then(res => {
    // 獲取數(shù)據(jù)成功后的其他操作
    ………………    
   })   
  }  
 }
}

/**axios封裝
 * 請(qǐng)求攔截、相應(yīng)攔截、錯(cuò)誤統(tǒng)一處理
 */
import axios from 'axios';import QS from 'qs';
import { Toast } from 'vant';
import store from '../store/index'

// 環(huán)境的切換
if (process.env.NODE_ENV == 'development') { 
 axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') { 
 axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') { 
 axios.defaults.baseURL = 'http://api.123dailu.com/';
}

// 請(qǐng)求超時(shí)時(shí)間
axios.defaults.timeout = 10000;

// post請(qǐng)求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 請(qǐng)求攔截器
axios.interceptors.request.use( 
 config => {
  // 每次發(fā)送請(qǐng)求之前判斷是否存在token，如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token，不用每次請(qǐng)求都手動(dòng)添加了
  // 即使本地存在token，也有可能token是過(guò)期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷
  const token = store.state.token;  
  token && (config.headers.Authorization = token);  
  return config; 
 }, 
 error => {  
  return Promise.error(error); 
 })

// 響應(yīng)攔截器
axios.interceptors.response.use( 
 response => {  
  if (response.status === 200) {   
   return Promise.resolve(response);  
  } else {   
   return Promise.reject(response);  
  } 
 },
 // 服務(wù)器狀態(tài)碼不是200的情況 
 error => {  
  if (error.response.status) {   
   switch (error.response.status) {    
    // 401: 未登錄    
    // 未登錄則跳轉(zhuǎn)登錄頁(yè)面，并攜帶當(dāng)前頁(yè)面的路徑    
    // 在登錄成功后返回當(dāng)前頁(yè)面，這一步需要在登錄頁(yè)操作。    
    case 401:     
     router.replace({      
      path: '/login',      
      query: { redirect: router.currentRoute.fullPath } 
     });
     break;
    // 403 token過(guò)期    
    // 登錄過(guò)期對(duì)用戶進(jìn)行提示    
    // 清除本地token和清空vuex中token對(duì)象    
    // 跳轉(zhuǎn)登錄頁(yè)面    
    case 403:      
     Toast({      
      message: '登錄過(guò)期，請(qǐng)重新登錄',      
      duration: 1000,      
      forbidClick: true     
     });     
     // 清除token     
     localStorage.removeItem('token');     
     store.commit('loginSuccess', null);     
     // 跳轉(zhuǎn)登錄頁(yè)面，并將要瀏覽的頁(yè)面fullPath傳過(guò)去，登錄成功后跳轉(zhuǎn)需要訪問(wèn)的頁(yè)面
     setTimeout(() => {      
      router.replace({       
       path: '/login',       
       query: { 
        redirect: router.currentRoute.fullPath 
       }      
      });     
     }, 1000);     
     break; 
    // 404請(qǐng)求不存在    
    case 404:     
     Toast({      
      message: '網(wǎng)絡(luò)請(qǐng)求不存在',      
      duration: 1500,      
      forbidClick: true     
     });     
    break;    
    // 其他錯(cuò)誤，直接拋出錯(cuò)誤提示    
    default:     
     Toast({      
      message: error.response.data.message,      
      duration: 1500,      
      forbidClick: true     
     });   
   }   
   return Promise.reject(error.response);  
  }  
 }
);
/** 
 * get方法，對(duì)應(yīng)get請(qǐng)求 
 * @param {String} url [請(qǐng)求的url地址] 
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)] 
 */
export function get(url, params){ 
 return new Promise((resolve, reject) =>{  
  axios.get(url, {   
   params: params  
  })  
  .then(res => {   
   resolve(res.data);  
  })  
  .catch(err => {   
   reject(err.data)  
  }) 
 });
}
/** 
 * post方法，對(duì)應(yīng)post請(qǐng)求 
 * @param {String} url [請(qǐng)求的url地址] 
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)] 
 */
export function post(url, params) { 
 return new Promise((resolve, reject) => {   
  axios.post(url, QS.stringify(params))  
  .then(res => {   
   resolve(res.data);  
  })  
  .catch(err => {   
   reject(err.data)  
  }) 
 });
}