axios 管理api方式

首先介紹安裝axios方法

npm install axios --save

然後在需要的地方引入即可

import axios from 'axios';

1傳統調用方法

從傳統方式來看，是要一個一個調用接口，但是如果有天調用方式(post/get…)改變或是地址改了就會需要一個一個更改，非常沒有效率。
此時我們可以將接口抽出來，在需要的時候引用接口，如果更改接口方法等時，只需要更改一個即可。

2. 攔截三步驟

以下為攔截三步驟

第一步:調用接口 =>透過import調用

<template>
//some code
</template>
<script>
import { getSms } from '@/api/login'
export default {
  name: 'login',
  setup (props, context) {
 
    getSms(responseData)
        .then((response) => {
       
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
    }

  return{}
  }
<script>

第二步: 從攔截器(service)調用request方法，記得要先引入攔截器

import service from '@/utils/request.js'

//獲取驗證碼
export function getSms(data){
  console.log(data);
  return  service.request({
    method: 'post',
    url: '/getSms/',
    data
  });
}

第三步:建立攔截器，攔截器可以用來處理再傳送前和接收後的動作，比如如果後臺返回結果為錯誤的話可以使用element ui的錯誤message來顯示給用戶端，這樣一來不在需要一個一個設定而是統一設定。

import axios from 'axios'
import { Message } from 'element-ui';





const BASEURL=process.env.NODE_ENV === 'production' ? '':  '/devApi'
//創建 axios,賦給變量service
const service = axios.create({
  baseURL:BASEURL,
});


// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么

    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });



// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    let data =response.data
    if(data.resCode !==0){
      Message.error(data.message)
      return Promise.reject(data);
    }else{
    
      
      return response;
    }
    
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });


  export default service

以上圖片轉至手把手嚕前端教學影片