axios的基本使用 axios的简易封装

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' })
}