在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.安装

cnpm/npm install axios -S

bootcdn：

---

2.axios配置项

    // 发起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：删除数据

    // 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.方法别名/快捷方法

    // 快捷方法 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

    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.全局默认值

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

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

---