vue 請求統一封裝和調用

1. request.js統一封裝的請求接口

/*
 * @Author: your name
 * @Date: 2020-03-20 14:17:34
 * @LastEditTime: 2020-03-26 11:27:50
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: 。。。。。。。。。。
 */
import axios from 'axios'
import { Message } from 'element-ui'

const token ='你自己的token'
// create an axios instance
const service = axios.create({
  baseURL: '/api',
  timeout: 80000 // request timeout
})

// request interceptor
service.interceptors.request.use(

  config => {
    // Do something before request is sent
    if (token) {
      // 讓每個請求攜帶token-- ['X-Token']爲自定義key 請根據實際情況自行修改
      config.headers.Authorization = token 
      
    }
    return config
  },
  error => {
    // Do something with request error
    // console.log("出錯啦",error) // for debug
    Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => response,

  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

2.調用api

import request from '@/utils/request'
// 獲取你要的數據
export function getData(data) {
	return request({
		url: '/test/testdata/',//自己的接口地址
		method: 'post',//請求方法
        data //需要攜帶的參數
	})
}

 

3.調用過程爲頁面引入api文件，再由api調用統一的請求函數請求數據

import { getData} from "@/api";
 // 獲取數據
    getDataTest(data) {
      getData(data)
        .then(response => {
          console.log(response.data;)
        })
        .catch(error => {
          this.$message.error("獲取失敗！");
        });
    },

這些的前提是配置了代理轉發，如果沒有配置代理轉發直接請求的話請在1中配置，具體方法參閱axios官網

http://www.axios-js.com/