axios api封裝

（1）在src下建立request/api.js檔案

// 引入axios和qs
		import axios from 'axios'
		import qs from 'qs'
		
		// 建立axios請求執行個體
		const request = axios.create({
		  baseURL: '你的域名', // 設定跨域代理接口統一的前置位址
		  timeout: 1000,
		  headers: {
		    'Content-Type': 'application/x-www-form-urlencoded'
		})
		
		// 添加請求攔截器
		request.interceptors.request.use(function (config) {
		  // 在發送請求之前做些什麼
		  return config
		}, function (error) {
		  // 對請求錯誤做些什麼
		  return Promise.reject(error)
		})
		
		// 添加響應攔截器
		request.interceptors.response.use(function (response) {
		  // 隻傳回資料
		  return response.data
		}, function (error) {
		  // const status = error.response.status
		  // if (status >= 500) {
		  //   alert('服務繁忙請稍後再試')
		  // } else if (status >= 400) {
		  //   console.log(error)
		  //   alert(error.response.data.message)
		  // }
		  // 對響應錯誤做點什麼
		  // console.dir(error)
		  return Promise.reject(error)
		})
		
		// 你定義的背景請求接口調用
		// postApi, getApi 自定義方法名稱
		// data 請求時向背景發送的參數
		// qs 請求時預設FormData,參數為字元串，使用qs.stringify(data)轉換成對象，也可自行設定請求頭
		export function postApi (data) {
		  return request({
		    url: '背景接口位址',
		    method: 'post',
		    data: qs.stringify(data)
		  })
		}
		
		export function getApi (data) {
		  return request({
		    url: '背景接口位址',
		    method: 'post',
		    data: qs.stringify(data)
		  })
		}

           

（2）main.js中引入

import * as api from './request/api.js'
	Vue.prototype.$api = api
		
           

（3）頁面使用

引入api中的方法直接調用
           

import { postApi ，getApi  } from '@/request/api'
	
	//  或者不想引入
	//this.$api.postApi (data).then(res => {
    //  	console.log(res)
    //}).catch(res => {
    //   	console.log(res)
    //})
	

    	let data = {type: 'resourcesType'}
    	postApi (data).then(res => {
      		console.log(res)
    	}).catch(res => {
      		console.log(res)
    	})