在vue中使用axios发送请求

前言

如何在vue中使用axios发起请求？

1.安装

2.axios配置项

3.axios发起get、post等请求方法

4.方法别名/快捷方法

5.全局默认值

6.请求拦截器、响应拦截器

前言

axios是基于promise的http库，可以运行在浏览器和nodejs。

特性：

1.运行在浏览器和nodejs

2.基于promise，可以使用promise实例方法

3.可以对请求和响应拦截处理

4.运行在浏览器创建XMLHttpRequests

5.运行在nodejs创建http请求

如何在vue中使用axios发起请求？

1.安装

javascript 复制代码

cnpm/npm install axios -S

bootcdn：

javascript 复制代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.axios配置项

javascript 复制代码

    // 发起axios请求
    axios({
      // 请求路径 必填项
       url:"",
      // 请求方法
       method:"",
      // 基础路径 拼接在url之前
       baseURL:'',
      // get delete head 一类请求携带参数选项
       params:{

       },
       // post put patch 一类请求携带参数选项
       data:{

       },
       // 设置请求头
       headers:{},
       // 请求超过2s未完成中断请求
       timeout:2000
     })

3.axios发起get、post等请求方法

先介绍一下，Axios常用的几种请求方法有哪些：get、post、put、patch、delete

get：（一般用于）获取数据

post：提交数据（表单提交+文件上传）

put：更新（或编辑）数据（所有数据推送到后端（或服务端））

patch：更新数据（只将修改的数据推送到后端）

delete：删除数据

javascript 复制代码

    // axios  get请求---无参 axios默认发送get请求 axios返回的是promise实例对象 可以使用promise 实例api
    let res = axios({
      url:'自己的服务器地址'
    }).then(res=>{
      console.log(res,'获取成功响应')
    }).catch(error=>{
      console.log(error,'获取失败响应')
    })
    console.log(res); axios方法 返回值是promise实例对象

    // axios get请求携带参数  不需要转换数据格式 axios会自动将js对象转为查询字符串
    let res = axios({
      url:"自己的服务器地址",
      // get类请求携带参数选项 params只接受一个纯js对象
      params:{
        page:1,
        pageSize:10
      }
    });
    console.log(res);

    // axios发起post请求 post参数：json字符串 表单格式数据
    // axios 发起post请求默认数据格式为json格式数据 请求头Content-Type也会自动设置为application/json
    let res = axios({
      url:"自己的服务器地址",
      method:'post',
      data:{
        username:"admin1",
        password:123321
      }
    });
    console.log(res)


    // axios发起表单格式的post请求 --保存请求
    let res = axios({
      url: "自己的服务器地址",
      method: "post",
      // 如果发送post请求携带参数是表单格式数据 需要将js对象转为表单格式数据
      data: Qs.stringify({
        username: '测试用户terry',
        password: 123456
      }),
      headers: {
        'Authorization': "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE3MDIyNjMyNTYsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNzAyNDM2MDU2LCJuYmYiOjE3MDIyNjMyNTZ9.JHmlslry8c_MfFCBH5Ld4PUxYU1-2nMWo2OhOXO3H3g"
      }
    });
    console.log(res);
    // get delete head 
    // post put patch

4.方法别名/快捷方法

javascript 复制代码

    // 快捷方法 get无参  axios.get(url,请求配置项) 
    axios.get('自己的服务器地址').then(res=>{
      console.log(res.data,'获取响应');
    });
    // get带参 
    axios.get('自己的服务器地址',{
      params:{
        page:1,
        pageSize:10
      },
      headers:{
      },
      timeout:2000
    }).then(res=>{
      console.log(res.data,'获取响应');
    })

axios发起post请求默认数据格式是json数据格式---登录

axios发起表单格式post请求设置请求头Content-type:application/x-www-form-urlencoded

javascript 复制代码

    axios.post(url,data,请求配置项) 发起post请求 数据格式会自动转为json格式
    let data = {
      username:"admin1",
      password:123321
    }
    axios.post('自己的服务器地址',data,{
      timeout:2000,
      headers:{}
    }).then(res=>{
      console.log(res);
    })
    let data = {
      username:'测试用户9999888',
      password:654789,
    };
    axios.post('自己的服务器地址',Qs.stringify(data),{
      headers:{
        'Authorization': "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE3MDIyNjMyNTYsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNzAyNDM2MDU2LCJuYmYiOjE3MDIyNjMyNTZ9.JHmlslry8c_MfFCBH5Ld4PUxYU1-2nMWo2OhOXO3H3g"
      }
    }).then(res=>{
      console.log(res.data,'获取响应');
    })

5.全局默认值

javascript 复制代码

    // 全局axios默认值 
    axios.defaults.baseURL = '自己的服务器地址';
    axios.defaults.headers['Auth']='123';
    axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';

6.请求拦截器、响应拦截器

html 复制代码

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>

<script>
import axios from 'axios'
// 拦截器：在请求或响应被处理前拦截它们
// 请求拦截器、响应拦截器
export default {
  name: "get",
  created() {
    //请求拦截器
    axios.interceptors.request.use(config => {
      //在发送请求前做些什么
      return config;
    }, err => {
      //在请求错误的时候做些什么
      return Promise.reject(err);
    })

    //响应拦截器
    axios.interceptors.response.use(res => {
      //请求成功对响应数据做处理
      return res;
    }, err => {
      //响应错误做些什么
      return Promise.reject(err);
    })

    //取消拦截器(了解)
    let interceptors = axios.interceptors.request.use(config => {
      config.headers = {
        auth: true
      }
      return config;
    })
    axios.interceptors.request.eject(interceptors);

    //例子：登录状态（token:''） 需要登录的接口
    let instance = axios.create({});
    instance.interceptors.request.use(config => {
      config.headers.token = '';
      // config.headers = {//这种写法会覆盖掉headers中的其他参数，导致headers中只包含token这一个参数，所以不建议这种写法
      //   token: ''
      // }
      return config;
    }, err => {
      return Promise.reject(err);
    })

    //移动端弹窗
    let instance_phone = axios.create({});
    instance_phone.interceptors.request.use(config => {
      $('#modal').show();
      return config;
    })
    instance_phone.interceptors.response.use(res => {
      $('#modal').hide();
      return res;
    })
  }
}
</script>

<style scoped>

</style>