vue項(xiàng)目經(jīng)常會(huì)用到axios來請(qǐng)求數(shù)據(jù)，那么首先肯定需要對(duì)這個(gè)請(qǐng)求方法進(jìn)行一個(gè)二次封裝，這樣能節(jié)省不必要的重復(fù)操作和過度冗余的代碼

根目錄創(chuàng)建api文件

在api文件下創(chuàng)建request.js文件简软，然后引入vue、axios伙狐、loading組件虑省，同時(shí)使用axios文檔上的方法create創(chuàng)建：

import Vue from 'vue'
import axios from 'axios'
import { showLoading, hideLoading } from 'components/loading'

const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  method: 'get', // default
  withCredentials: true,
  timeout: 15000 // 請(qǐng)求超時(shí)時(shí)間
})

// 添加請(qǐng)求攔截器
service.interceptors.request.use(
  config => {
    // 在發(fā)送請(qǐng)求之前做一些事情
    showLoading()
    return config
  },
  error => {
    //做一些有請(qǐng)求錯(cuò)誤的事情
    return Promise.reject(error);
  }
)

// response 攔截器
service.interceptors.response.use(
  response => {
    //使用響應(yīng)數(shù)據(jù)返回響應(yīng)；
    hideLoading()
    return response
  },
  error =>{
    //使用響應(yīng)錯(cuò)誤返回
    return Promise.reject(error.response.data)
  }
)

export default service

頁面上使用方法

一县忌、在api文件下創(chuàng)建配置參數(shù)地址方法
比如登錄頁面需要請(qǐng)求接口掂榔，那么在api文件下創(chuàng)建login.js，然后再創(chuàng)建提供調(diào)用的方法：

import request from './request'

export const login = (username, password) => {
  return request({
    url: '/user/login',
    method: 'POST',
    data: {
      'name':username,
      'password':password
    }
  })
}

export const logout = () => {
  return request({
    url: '/user/logout',
    method: 'POST'
  })
}

export const modifyPasswor = (password) => {
  return request({
    url: '/user/modify',
    method: 'POST',
    data: {
      'password':password
    }
  })
}

那么當(dāng)頁面上調(diào)用這個(gè)方法時(shí)症杏，就會(huì)把當(dāng)前配置的參數(shù)地址傳遞給request.js装获，當(dāng)前傳遞過去的數(shù)據(jù)會(huì)跟axios.create自動(dòng)合并，那么傳過去的url會(huì)跟request.js的baseURL自動(dòng)拼接在一起厉颤，如果不希望當(dāng)前傳過去的跟baseURL拼接穴豫，那么可以傳一個(gè)完整的url

頁面調(diào)用login.js方法

<template>
  <div class="login-page">
    <img src="../../common/images/logo.png"  class="logo-img">
    <h1 class="login-title">歡迎登錄</h1>
    <ul class="login-list">
      <li class="login-item">
        <input type="text" placeholder="請(qǐng)輸入工號(hào)" v-model="username"/>
      </li>
      <li class="login-item">
        <input type="password" placeholder="請(qǐng)輸入密碼" v-model="password"/>
      </li>
    </ul>
    <van-button type="info" size="large" @click="login">登錄</van-button>
    <div class="login-tips">若忘記賬號(hào)密碼，請(qǐng)與您的上級(jí)聯(lián)系找回</div>
  </div>
</template>

<script>
import {login} from 'api/login'
import { isEmpty } from 'utils/common'
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return{
      username: '',
      password: ''
    }
  },
  methods: {
    ...mapMutations(['changeUserInfo']),
    login() {
      if(isEmpty(this.username)){
        this.$toast('請(qǐng)輸入工號(hào)');
        return
      }
      if(isEmpty(this.password)){
        this.$toast('請(qǐng)輸入密碼');
        return
      }
      login(this.username, this.password).then((res) => {
        res = res.data
        if(res.status === '00'){
          const data = res.data
          // 登錄信息放在store
          this.changeUserInfo(data)
          this.$toast(res.msg);
          this.$router.push({path: '/list'})
        }else{
          this.$toast(res.msg);
        }
      }).catch((err) => {
        this.$toast(err);
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>