axios发送请求的基本用法

axios的基本用法和特性不阐述

中文文档如下

Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js (axios-http.cn)

1.安装

axios安装

npm or yarn

npm install axios

yarn add axios

亦或者使用cdn

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

qs安装（建议）

npm

npm install qs

亦或者使用cdn

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>

提示

qs.parse()和qs.stringify()

这两种方法虽然都是序列化，但是还是有区别的。
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

2.引入

一般项目里都是封装好的axios 这里不写全局引入 以页面引入举例

<template>
  ...
</template>

<script>

  // axios引入
  import axios from 'axios'
  // qs引入（建议）
  import qs from 'qs'

  export default {
    ...
  }
</script>

3.使用

以下代码未配置失败回调

.catch(error => {
  //失败回调
  console.log(error);
})

GET发送请求

无参请求 默认为GET

axios({
    url: 'url',
}).then(res => {
    console.log(res)
})

带参请求

axios({
  url: 'url?id=1&type=2',
  method: 'get',
}).then(res => {
    console.log(res)
})

使用params发送请求

axios({
  url: 'url',
  method: 'get',
  params: {id: 1}
}).then(res => {
    console.log(res)
})

POST发送请求

POST请求参数会自动转换成JSON格式 如需表单格式 则可以通过qs序列化工具转换

无参请求

axios({
  url: 'url',
  method: 'post',
}).then(res => {
    console.log(res)
})

带参请求

axios.post('接口地址',{
  id:'1',
  type:2
}).then(res=>{
  console.log(res);
})

使用data发送请求

let _data = {
    id : '1',
    type : 2
  }
axios({
    url: 'url;',
    method: 'post',
    data: _data
}).then(res => {
    console.log(res)
})

使用URLSearchParams传递参数发送请求

let params = new URISearlhParams();
params.append('id','1');
params.append('type', 2);

axios.post('url',params).then(res =>{
  console.log(res)
})

使用qs发送表单类型数据

axios({
  url: 'url',
  method: 'post',
  data: qs.stringify({
    id : '1',
    type : 2
  }),
  headers: {
    // 不加也行
    'Content-Type': 'application/x-www-form-urlencoded',
   },
}).then(res => {
  console.log(res)
})