项目前端（二）2.1、axios在vue中的使用

vue怎么封装axios，并在组件中不通过api直接调用封装后的方法

1. 安装axiox

		 npm insall axios

2. 在项目src目录下新建utils文件夹

3. 在utils文件下新建文件request.js文件，并在文件中编写axios二次封装内容

//导入axios
import axios from "axios"

//创建axios实例
const instance = axios.create({
   baseURL: 'http://127.0.0.1:80/', //设置全局请求地址
   timeout: 5000 //设置超时时间
})

instance.interceptors.request.use(
   function(config){
       config.headers.token = '12345' //请求头加token
       config.headers.info = 'syx'  //在请求头中加info信息
       return config
   },function(err){
       return Promise.request(err)
   }
)

//封装get和post请求
export function get(url, params){
   return instance.get(url, {params})
}

export function post(url, data){
   instance.post(url, data)
}

//暴露创建的实例
export default instance

4. 在组件中使用axios封装的的内容

<template>
  <el-row>
    <el-col :span="24">
      <div class="logo">
        <img class="logo-image" src="../assets/images/logo.png" />
        <div class="title">Pear Admin</div>
      </div>
    </el-col>
  </el-row>
  <el-row class="login-from">
    <el-col :span="12">
      <div class="login-from-image">
        <img src="../assets/images/login-from-image5.png" />
      </div>
    </el-col>
    <el-col :span="12">
      <div class="login-from-info">
        <h1 style="margin-left: 40%; margin-top: -13px">
          登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
        </h1>
        <el-form status-icon :model="loginForm" :rules="loginrules" label-width="100px">
          <el-form-item  label="账&nbsp;&nbsp;号" prop="username">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密&nbsp;&nbsp;码" prop="userpassword">
            <el-input type="password" v-model="loginForm.userpassword" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox>记住密码</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loginClick" >登 陆</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>

<style>
</style>

<script>

import request from '../utils/request'   /引入封装的axios

export default {
  name:"login",
  data() {
    return {
      loginForm: {
        username: '',
        userpassword: ''
      },
      loginrules:{}
    }
  },
  methods: {
    loginClick(){
    	//判断用户名及密码是否为空
        if(this.loginForm.username != '' && this.loginForm.userpassword != ''){
            /*  不使用封装axios自己使用的方法
             const axios = require('axios')
             axios.post('/loging',this.loginForm).then(res=>{})
             */
           //使用封装axios后中的post方法发送请求
          request.post('/login',this.loginForm).then(res=>{
            console.log(res.data)
            if(res.data.code == 200){
              //存储token到本地
              this.$store.commit("Set_TOKEN",res.data.vData.token);
              //跳转到主页
              this.$router.replace('/index');
            }else{
              ElMessage.error('校验失败')
            }
          })
        }else{
          ElMessageBox.alert('请输入账号和密码', '提示消息',{
            autofocus: false,
            confirmButtonText:'确定'
          })
        }
      }
    }
}

</script>

5. 在登录页面点击登录按钮，有响应链接，并且链接中有我们设置的请求头信息，说明使用封装axios正确