axios日常学习记录

一、json-server工具包的安装

1、安装

使用npm全局安装

 npm install -g json-server

查看版本号

  json-server -v

2、创建json数据 —— db.json

在项目文件夹根目录下，执行代码：json-server --watch db.json会产生一个db.json文件

3、使用

访问json-server --watch db.json运行的对应地址，即可访问对应接口的json数据，如：http://localhost:3000/posts

二、HTTP相关复习

1、前后台交互的基本过程

1. 前后应用从浏览器端向服务器发送HTTP请求(请求报文)
2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

2. HTTP请求报文

1. 请求行: 请求方式/url
2. 多个请求头: 一个请求头由name:value组成, 如Host/Cookie/Content-Type头
3. 请求体

3. HTTP响应报文

1. 响应行: 响应状态码/对应的文本
2. 多个响应头: 如 Content-Type / Set-Cookie 头
3. 响应体

4. post请求体文本参数格式

1. Content-Type: application/x-www-form-urlencoded;charset=utf-8
    用于键值对参数，参数的键值用=连接, 参数之间用&连接
    例如: name=%E5%B0%8F%E6%98%8E&age=12
2. Content-Type: application/json;charset=utf-8
    用于json字符串参数
    例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}

5. 常见响应状态码

200	OK                     请求成功。一般用于GET与POST请求
201 Created                已创建。成功请求并创建了新的资源
401 Unauthorized           未授权/请求要求用户的身份认证
404 Not Found              服务器无法根据客户端的请求找到资源
500 Internal Server Error  服务器内部错误，无法完成请求

6. 同类型的请求及其作用

1. GET: 从服务器端读取数据
2. POST: 向服务器端添加新数据
3. PUT: 更新服务器端已经数据
4. DELETE: 删除服务器端数据

7. API的分类

1. REST API:    restful
    发送请求进行CRUD哪个操作由请求方式来决定
    同一个请求路径可以进行多个操作
    请求方式会用到GET/POST/PUT/DELETE
2. 非REST API:   restless
    请求方式不决定请求的CRUD操作
    一个请求路径只对应一个操作
    一般只有GET/POST

三、使用XHR封装一个发ajax请求的通用函数

1. 区别ajax请求与一般HTTP请求

ajax请求是一种特别的http请求: 只有通过XHR/fetch发送的是ajax请求, 其它都是一般HTTP请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发请求: 只有XHR或fetch发出的才是ajax请求, 其它所有的都是非ajax请求
浏览器端接收到响应
    一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
    ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

2. 封装简易版axios

1、函数的返回值为promise，成功的结果为response，失败的结果为error
2、能处理多种类型的请求：GET/POST/PUT/DELETE
3、函数的参数为一个配置对象
   {
         url: '',  // 请求地址
         method: '',  // 请求方式GET/POST/PUT/DELETE
          params: {},  // GET/DELETE请求的query参数
          data: {}, // POST或DELETE请求的请求体参数
     }
4、响应json数据自动解析为js的对象/数组

function axios({
    url,
    method='GET', // 指定默认值为get
    params={},
    data={}
}) {
    // 返回一个promise对象
    return new Promise((resolve, reject) => {

    // 处理method
    method = method.toUpperCase()
    
    // 处理query参数（拼接到url上）  id=1&xxx=abc
    let queryString = ''
    // Object.keys的用法：https://blog.csdn.net/weixin_46663768/article/details/106626685
    Object.keys(params).forEach(key => {
        queryString += `${key}=${params[key]}&`
    })
    if (queryString) {
        // 去除最后的&
        queryString = queryString.substring(0, queryString.length-1)
        // 接到url
        url += '?' + queryString
    }



    // 1、执行异步ajax请求
    // 创建xhr对象
    const request = new XMLHttpRequest()
    // 打开连接（初始化请求，没有请求）
    request.open(method, url, true)

    // 发送请求
    if (method==='GET' || method==='DELETE'){
        request.send()  // 异步执行
    } else if (method==='POST' || method==='PUT'){
        request.setRequestHeader('Content-Type', 'application/json;charset=utf-8')  //告诉服务器请求体的格式是json 如果发送json格式数据必须添加请求头
        request.send(JSON.stringify(data))  // 发送json格式请求体参数
    }

    // 绑定状态改变的监听
    request.onreadystatechange = function () {
        // 如果请求没有完成，直接结束
        if (request.readyState !== 4) {
            return
        }
        // 如果响应状态码在[200, 300]之间标识成功，否则失败
        const {status, statusText} = request

        // 2.1、如果请求成功，调用resolve
        if (status>=200 && status<=299) {
            const response = {
                data: JSON.parse(request.response), // 响应json数据自动解析为js的对象/数组
                status,
                statusText
            }
            resolve(response)
        } else {  // 2.2、如果请求失败，调用reject
            reject(new Error('request error status is ' + status))
        }
    }

})

四、axios的特点

基本promise的异步ajax请求库
浏览器端/node端都可以使用
支持请求／响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

五、axios常用语法

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定url发get请求
axios.request(config): 等同于axios(config)
axios.get(url[, config]): 发get请求
axios.delete(url[, config]): 发delete请求
axios.post(url[, data, config]): 发post请求
axios.put(url[, data, config]): 发put请求

axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器

axios.create([config]): 创建一个新的axios(它没有下面的功能)

axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的token对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

1. axios.create(config)

a. 根据指定配置创建一个新的axios, 也就是每个新axios都有自己的配置
b. 新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
c. 为什么要设计这个语法?
	需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
	解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

axios.defaults.baseURL = 'http://localhost:3000'
axios({
    url: '/posts'
})

const instance = axios.create({
    baseURL: 'http://localhost:4000'
})
// 使用instance发请求
instance({
    url: '/posts'
})
instance.get('./xxx')

2. 请求拦截器axios.interceptors.request.use

axios.interceptors.request.use((config) => {
    // 在准备发请求前，取消未完成的请求
    if(typeof cancel === 'function'){
        cancel('取消请求')
    }
    // 添加一个CancelToken的配置
    config.cancelToken =  new axios.CancelToken(function executor(c) { // c是用于取消当前请求的函数
        // 保存取消函数，用于之后可能需要取消当前请求
        cancel = c
    })
    return config
})

3. 响应拦截器axios.interceptors.response.use

axios.interceptors.response.use(
    response => {
        cancel = null
        return response
    },
    error => {
        if (axios.isCancel(error)){  // 取消请求的错误
            console.log('请求取消的错误', error.message)
            // 中断promise链
            return new Promise(() => {})
        } else {  // 请求出错了
            cancel = null
            // 将错误向下传递
            // throw error
            return Promise.reject(error)
        }
    }
)