axios的基本使用

一. 简介

Axios是一个基于promise的 HTTP 库，在vue中使用axios进行异步请求和发起和响应的接收。

二.下载 引入

脚手架中默认没有提供这个包的下载，意味着我们需要自己手动下载，引入，使用

传送门：
Axios 中文说明

下载安装：
npm install axios

引入
improt axios from 'axios'

三.使用axios发起get方式请求

使用axios可以发起get方式请求，请求可以无参，也可以有参

1.get方式的无参请求

axios.get(地址)
.then(请求成功的回调).catch(请求失败的回调)

2.get方式的带参请求

1. 拼接参数

   axios.get(地址?参数=值&参数=值.....)
   .then(请求成功的回调).catch(请求失败的回调)
   

2. parmas对象传递参数

   axios.get(地址,{
       params:{参数}
   }).then(请求成功的回调).catch(请求失败的回调)
   

四.使用axios发起post方式请求

使用axios可以发起post方式请求，一般post请求都会有参数

post方式请求

axios.post(地址,{参数})
    .then(请求成功的回调)
    .catch(请求失败的回调)

参数的格式为对象

axios的简易封装

使用axios.create()实现封装

Axios 中文说明

1. 作用：可以使用自定义配置新建一个axios 实例
2. 常见配置：
   url：请求路径
   method：请求方式，常见的有get,post…
   baseURL：基准路径，会自动的拼接在 url 前面
   params | data:get或post请求传递的参数，它是一个对象
3. 实现封装
   引入 : import axios from 'axios'
   创建对象
   进行配置

   // 添加统一配置
   export default axios.create({
       baseURL:'请求地址',
       //.....
   })
   

   暴露 export default
4. 使用封装好的axios发起请求
   引入 使用

   import myaxios from '@/utils/myaxios.js'
   // 使用封装的axios发起请求
   myaxios.get(/index/rank')
       .then()
       .catch()
   

使用defaults配置实现封装

1. 作用：可以通过axios.defaults来axios发送请求时的配置

2. 常见配置：
   url：请求路径
   method：请求方式，常见的有get,post…
   baseURL：基准路径，会自动的拼接在 url 前面
   params | data:get或post请求传递的参数，它是一个对象

3. 实现封装
   引入
   进行配置(主要是配置baseURL)
   暴露

   import axios from 'axios'
   
   //通过defaults配置 基础路径
   axios.defaults.baseURL = 'https://www.escook.cn'
   
   export default axios
   

4. 使用封装好的axios发起请求
   引入 使用

   import myaxios from '@/utils/myaxios.js'
   // 使用封装的axios发起请求
   myaxios.get(/index/rank')
       .then()
       .catch()
   

axios()实现具体请求的封装

1. 作用：可以通过axios函数，添加相应的配置来发起请求
2. 常见配置：
   url：请求路径
   method：请求方式，常见的有get,post…
   baseURL：基准路径，会自动的拼接在 url 前面
   params | data:get或post请求传递的参数，它是一个对象
3. 实现封装:

import myaxios from '../utils/require'

export const getGoods = () => {
    return myaxios({ url: '/api/goods' })
}