vue项目中axios的用法

1、安装

npm install axios vue-axios --save-dev

2、在main.js中引入

import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

3、用法

（1）post请求

      // post请求调接口
      this.axios.post('/login/token', {
        password: '1',
        username: 'admin'
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });
      // 或是调用axios.API实现post请求
      this.axios({
        method: 'post',
        url: '/login/token',
        data: {
        password: '1',
        username: 'admin'
        }
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

在Vue中实现数据双向绑定拿到调接口要传递的参数

<template>
  <div class="login">
    <el-form :model="loginForm" label-width="80px">
      <el-form-item label="账号：">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loginSubmit">登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      loginForm: {
        password: '',
        username: ''
      }
    };
  },
  methods: {
    loginSubmit () {
      let _this = this;
      // post请求调接口
      this.axios.post('/login/token', _this.loginForm).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });
      // 或是调用axios.API实现post请求
      this.axios({
        method: 'post',
        url: '/login/token',
        data: _this.loginForm
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .login{
    width: 300px;
    margin: 0 auto;
  }
</style>

（2）put请求

      // put请求调接口
      this.axios.put('/login/users/liu/password', {
        newpassword: '2'
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });
      // 或是调用axios.API实现put请求
      this.axios({
        method: 'put',
        url: '/login/users/liu/password',
        data: {
          newpassword: '1'
        }
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

（3）get请求

      // 不带参数的get请求
      // get请求调接口
      this.axios.get('/login/users/liu').then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });
      // 或是调用axios.API实现get请求
      this.axios({
        method: 'get',
        url: '/login/users/liu'
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });


      // 带一个参数的get请求
      this.axios.get('/login/users?limit=100').then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

      this.axios.get('/login/users', {
        params: {
          limit: 100
        }
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

      this.axios({
        method: 'get',
        url: '/login/users',
        params: {
          limit: 100
        }
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });


      // 带多个参数的get请求
      this.axios.get('/login/users?limit=100&username=li').then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

      this.axios.get('/login/users', {
        params: {
          limit: 100,
          username: 'li'
        }
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

      this.axios({
        method: 'get',
        url: '/login/users',
        params: {
          limit: 100,
          username: 'li'
        }
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

（4）delete 请求

      // delete请求调接口
      this.axios.delete('/login/users/liu').then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });
      // 或是调用axios.API实现delete请求
      this.axios({
        method: 'delete',
        url: '/login/users/shan'
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

（5）axios全局默认值设置：设置以后应用于每个请求。

设置axios应该在main.js中设置，也可以单独建一个js文件，在该js文件中设置，然后再在main.js中使用import导入该js文件

// 设置项目请求的根路径,设置以后，项目中调所有接口就会在前面拼接上根路径
axios.defaults.baseURL = 'http://';
// 使用axios发送post请求时,设置默认请求头中Content-Type的值
axios.defaults.headers.post['Content-Type'] = 'application/json';
// 给请求头加一个名为'Authorization'的参数，可以用于设置请求头带token验证
axios.defaults.headers.common['Authorization'] = 'Bearer YWMtknehLoJT2k_f7mlPoNgo';

（6）添加请求拦截器

发送请求之前执行

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 发送请求前要做的事
    console.log('发送请求前');
    console.log(config);

    return config;
  },
  error => {
    return Promise.reject(error);
  });

（7）添加响应拦截器

在被 then 或者 catch 处理之前执行，在调接口以后then 或 catch 处理中拿到的数据是，在响应拦截器中，return 的内容

// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 对拿到的响应数据做些事
    console.log(response.config.url);
    console.log(response.data);

    return response.data;
  },
  error => {
    return Promise.reject(error);
  }
);