axios知识点

get请求 query传参：

 axios 'GET'请求 query传参 写法：
axios.get(`/xxx?id=123456`) // 写法一
axios.get('/xxx', {         // 写法二
  params: {
    id:123456
  }
})
axios({                     // 完整写法
  url:'/xxx',
  method:"GET",
  params:{
    id:123465
  }
})

post请求：

// axios 'POST'请求 请求体 传参 写法：
// 对象写法默认对 JSON.stringify 转换成JSON格式
axios.post('/xxxx', { name: 'zhangsan', age: 18 })
// urlencoded编码的请求
axios.post('/xxxx', 'name=zhangsan&age=18')

axios({ // 完整写法
  url: '/person',
  method: 'POST',
  data: { name: '张三', age18 }
})

// POST 请求携带 query参数 
axios({ // 完整写法
  url: '/person',
  method: 'POST',
  params: {
    a: 1,
    b: 2
  },
  data: { name: '张三', age18 }
})

axios：

axios 基于promise封装的ajax库 [核心还是基于 XMLHttpRequest 发送请求的]
http://www.axios-js.com/zh-cn/docs/
    + 基于axios发送数据请求，返回结果都是一个promise实例
      默认情况下
      + 服务器返回的响应状态是以2开始，则以promise状态为成功，值是一个response对象
        respone={
            config:{...},发送axios请求设置的配置项
            data:{...},服务器返回的响应主体信息
            headers:{...}，服务器返回的响应头信息
            request:{...}, 原生的xhr对象
            status:200,服务器响应的HTTP状态码
            statusText:'OK' 状态码的描述
        }
    + promise状态为失败
        1. 服务器有返回信息 [response对象存在] ，只不过HTTP状态码不是以2开始的
         reason={
            config: {...},
            isAxiosError: true,
            request: XMLHttpRequest实例对象,
            response: 等同于成功获取的response对象,
            toJSON: function...,
            message: 'xxx',
            ...
         }
        2. 请求超时 或者 请求中断了
         reason={
            code: "ECONNABORTED",
            response: undefined,
            ...
         }
        3. 断网了，特点：服务器没有反馈任何的信息

    我们可以自定义服务器返回的HTTP状态码为多少是成功，为多少是失败
    axios.get([url],{
        ...,
        // axios的validateStatus配置项，就是自定义promise实例状态是成功的条件
        validateStatus:(status)=>{
            return status >= 200 && status <= 300; // 默认处理机制
        }
    })

+ 基于axios发送请求的方式
  1. axios([config]) 或者 axios([url],[config])
  2. axios.request([config])
  3. axios.get/delete/head/options([url],[config])
  4. axios.post/put/patch([url],[data],[config])  -> [data]基于请求主体传递给服务器的信息
  5. let instance = axios.create([config])
    创建的Instance等同于axios,使用起来和axios一样...
    instance.get([url],[config])
    ...

+ axios发送请求时候的配置项 config
    1. url: 请求的地址  发送求情的时候，但凡没有单独设置url的，都需要在配置项中指定
    2. baseURL：请求地址的通用前缀  最后发送请求的时候，是把baseURL和url拼接在一起发送的
        axios.get('/user/list',{
            baseURl:'http://api.zhufeng.cn'
            ...
        })
        最后发送请求的地址是 'http://api.zhufeng.cn/user/list'
        特殊情况：如果url地址本身已经存在了 http或者https等信息，说明url本身就已经是完整的地址了，baseURL的值
        无需再拼接了
    3. transformRequest:(data,headers)=>{
        // data：自己传递[data]
        // headers：设置的请求头信息{对象}
        return xxx；返回值是啥，最后基于请求主体传递的就是啥
        }
        它只针对POST系列请求，把我们自己传递的[data]格式化为指定的格式，后期再基于请求主体发送给服务器
        axios内部做了一个处理，根据我们最后处理好的[data]的格式，自动设置请求头中的Content-Type中值
        1. 客户端基于请求主体传递给服务器的数据格式
            + form-data    Content-Type:multipart/form-data 主要应用于文件上传/表单提交
            + urlencoded   Content-Type:application/x-www.form-urlencoded
              GET系列请求:是基于URL问号传参把信息传递给服务器的 ?xxx=xxx&xxx=xxx
              xxx=xxx&xxx=xxx 这种字符串就是urlencoded格式字符串
            + raw 泛指，代指文本格式 [含：普通文本字符串、JSON格式字符串...]
              普通字符串 Content-Type：text/plain
              JSOn字符串 Content-Type：application/json
              ...
            + binary 二进制格式数据  主要应用于文件上传
        2. axios内部在默认情况下，如果我们[data]传递的是个普通对象，而且也没有经过transformRequest处理，则
            内部默认会把对象变为JSON格式字符串传递给服务器
    4.  transformResponse：data=>{
         // data：从服务器获取的结果，而且是响应主体信息[服务器响应主体返回的信息一般都是JSON格式字符串]
         return data
        }
        在我们自己的.then/catch之前，对服务器返回的结果进行修改

    5.  headers:{...}  自定义请求头信息
   
    6.  params:{...} GET系列请求，基于URL问号参数，把信息传递给服务器;我们params一般设置为对象，axios内部会把
        对象变为urlencoded 格式拼接到URL的末尾
    
    7.  data:{....} POST系列请求，基于请求主体传递的信息...
   
    8.  timeout:0 设置超时时间，写0就是不设置

    9.  withCredentials:false 在CORS跨域请求中，是否允许携带资源凭证

    10. responseType: 把服务器返回的结果设置为指定的格式 'arraybuffer','blob','document','json'[默认],'text','stream'...
   
    11. onUploadProgress:onUploadProgress=>{}
        onDownloadProgress:onDownloadProgress=>{}
    
    12. validateStatus:status=>status >= 200 && status < 300;
        定义服务为返回的状态码是多少，promise实例是成功的

    ...
    

axios请求的取消，依赖于 axios.CancelToken 完成
 const source= axios.CancelToken.soure();
 axios.get([url],{
    ...
    cancelToken: source.token
 }).catch(reason=>{
    // 取消后，promise实例是失败的
 })

 soure.cancel('...') 取消发送


+ axios中拦截器
  请求拦截器: 当axios把各方面配置都处理好了,在即将基于这些配置项服务器发送请求的时候，触发请求拦截器
  axios.interceptors.request.use(config=>{
    // config存储的是anxios处理好的配置，我们一般在请求拦截器中修改配置
    // ....
    return config
  })

  响应拦截器：服务器返回结果，axios已经知道返回的promise实例状态是成功还是失败了，在自己调用 .then/catch
   之前，先根据promise状态，把响应拦截器中设置的方法执行!
    axios.interceptors.response.use(
    response=>{
        // promise实例是成功的， 执行这个方法：  response存储服务器返回的结果
    },
    reason=>{
        // promise实例是失败的， 执行这个方法：  response存储失败的原因 
    }
  )

axios.get([url],[config])
    .then(value=>{})
    .catch(reason=>{})

md5加密：
下载： npm i blueimp-md5
导入： import md5 from "blueimp-md5"
使用:  password: md5(xxx)

axios二次封装

        100 个请求

        其中大部分请求发送的时候要干的事情，我们都需要提取出来

常用的请求有 ajax 、$.ajax 、  axios   、fetch

ajax原生ajax四步 [ XMLHttpRequest ]

$.ajax JQ中基于回调函数的方式，对ajax四步操作的封装，核心AXMLHttpRequest

$.ajax({
    url:'',
    success(resule){
    // ...
    }
})

axios基于promise对XMLHttpRequest的封装

axios.get('',{}).then(res=>{}).catch(err=>{})

fetch是ES6内置的API，和XMLHttpRequest没有关系，它是基于新的通信机制实现客户端和服务器端通信的

fetch本身就是基于promise管理的

二次封装：引入公共的配置项（base.js），在单独做处理

vue.config.js：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:9988',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
            '/jianshu': {
                target: 'https://www.jianshu.com/asimov',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/jianshu': ''
                }
            }
        }
    }
}

base.js： 

// 提取多套配置项公共的部分
import utils from "@/assets/utils";
import { ElMessage } from "element-plus";
const {  storage } = utils


export default function baseConfig(instance) {
    instance.defaults.baseURL = ''
    instance.defaults.timeout = 60000
    instance.defaults.validateStatus = status => {
        return status >= 200 && status <= 400
    }

    // 拦截器
    instance.interceptors.request.use((config) => {
        // config： 目前处理好的配置项
        let token = storage.get('token')
        if (token) config.headers.authorzation = token
    
        // 最后会按照return的配置项发送请求
        return config
    })
    
    
    // 响应拦截器: 请求结束（返回一个promise实例），再即将执行我们设定的then/catch之前，触发响应拦截器
    instance.interceptors.response.use(response => {
        // 请求成功后：我们返回响应主体信息
        return response.data
    }, reason => {
        // 请求失败后：根据不同的失败情况，做不同的提示
        let status = reason?.response?.status,
            code = reason?.code
        if (status) {
            //  服务器有返回结果，但是状态码没有经过 validateStatus的校验
            switch (+status) {
                case 404:
                    ElMessage.error('请求地址不存在')
                    break;
                case 500:
                    ElMessage.error('服务器发生了未知错误，请联系管理员')
                    break;
            }
        } else if (code === 'ECONNREFUSED') {
            ElMessage.error('当前请求已超时，请稍后再试~~')
            // 请求超时， err.code='ECONNREFUSED'
        } else if (axios.isCancel(reason)) {
            // 请求中断
            ElMessage.error('当前请求被中断了，请检查代码~~')
        } else {
            // 断网处理
            ElMessage.error('当前网络繁忙，请稍后再试~~')
        }
    
    
        // 提示过后，还是继续执行用户自己设定的catch方法
        return Promise.reject(reason)
    })
    
}

http.js(访问CRM)：

基于baseURL二次封装：
import axios from "axios"
import baseConfig from "./base";
import qs from "qs";
import utils from "@/assets/utils";
import { ElMessage } from "element-plus";
const { isPlainObject} = utils


const http = axios.create()
baseConfig(http)
http.defaults.baseURL = "/api"

http.defaults.transformRequest = data => {
    if (isPlainObject(data)) data = qs.stringify(data)
    return data
}

export default http



单独请求：

/* import axios from "axios";
import qs from "qs";
import utils from "@/assets/utils";
import { ElMessage } from "element-plus";
const { isPlainObject, storage } = utils

// 创建和axios类似的一个实例，之前基于axios.xxx()发送请求，现在也可以基于http.xxx()发送请求，语法一致
const http = axios.create({
    baseURL: '/api',
    timeout: 60000
})
// 只针对于POST系列请求的，请求主体内容进行格式化处理：按照后台的要求处理： 
// 不设置transformRequest，会把data对象转换为JSON字符传传递给服务器； Axios内部会识别常用的数据格式，自动设置请求头中的Content-Type
http.defaults.transformRequest = data => {
    if (isPlainObject(data)) data = qs.stringify(data)
    return data
}
http.defaults.validateStatus = status => {
    return status >= 200 && status <= 400
}

// 请求拦截器: 在所有配置项处理完，即将按照配置项向服务器发送请求之前，先执行请求拦截器中，我们在请求拦截器中，可以处理好的配置项再进行修改

http.interceptors.request.use((config) => {
    // config： 目前处理好的配置项
    let token = storage.get('token')
    if (token) config.headers.authorzation = token

    // 最后会按照return的配置项发送请求
    return config
})


// 响应拦截器: 请求结束（返回一个promise实例），再即将执行我们设定的then/catch之前，触发响应拦截器
http.interceptors.response.use(response => {
    // 请求成功后：我们返回响应主体信息
    return response.data
}, reason => {
    // 请求失败后：根据不同的失败情况，做不同的提示
    let status = reason?.response?.status,
        code = reason?.code
    if (status) {
        //  服务器有返回结果，但是状态码没有经过 validateStatus的校验
        switch (+status) {
            case 404:
                ElMessage.error('请求地址不存在')
                break;
            case 500:
                ElMessage.error('服务器发生了未知错误，请联系管理员')
                break;
        }
    } else if (code === 'ECONNREFUSED') {
        ElMessage.error('当前请求已超时，请稍后再试~~')
        // 请求超时， err.code='ECONNREFUSED'
    } else if (axios.isCancel(reason)) {
        // 请求中断
        ElMessage.error('当前请求被中断了，请检查代码~~')
    } else {
        // 断网处理
        ElMessage.error('当前网络繁忙，请稍后再试~~')
    }


    // 提示过后，还是继续执行用户自己设定的catch方法
    return Promise.reject(reason)
})

export default http

 */

http2.js(访问简书)：

基于baseURL二次封装：
import axios from "axios"
import baseConfig from "./base";
const http2 = axios.create()
baseConfig(http2)

http2.defaults.baseURL = '/jianshu'
export default http2


单独请求：
/* import axios from "axios";
import qs from "qs";
import utils from "@/assets/utils";
import { ElMessage } from "element-plus";
const { isPlainObject, storage } = utils

// 创建和axios类似的一个实例，之前基于axios.xxx()发送请求，现在也可以基于http.xxx()发送请求，语法一致
const http2 = axios.create({
    baseURL: '/jianshu',
    timeout: 60000
})

// http.defaults.transformRequest = data => {
//     if (isPlainObject(data)) data = qs.stringify(data)
//     return data
// }
// http.defaults.validateStatus = status => {
//     return status >= 200 && status <= 400
// }


http2.interceptors.request.use((config) => {
    // let token = storage.get('token')
    // if (token) config.headers.authorzation = token

    return config
})


// 响应拦截器: 请求结束（返回一个promise实例），再即将执行我们设定的then/catch之前，触发响应拦截器
http2.interceptors.response.use(response => {
    // 请求成功后：我们返回响应主体信息
    return response.data
}, reason => {
    // 请求失败后：根据不同的失败情况，做不同的提示
    let status = reason?.response?.status,
        code = reason?.code
    if (status) {
        //  服务器有返回结果，但是状态码没有经过 validateStatus的校验
        switch (+status) {
            case 404:
                ElMessage.error('请求地址不存在')
                break;
            case 500:
                ElMessage.error('服务器发生了未知错误，请联系管理员')
                break;
        }
    } else if (code === 'ECONNREFUSED') {
        ElMessage.error('当前请求已超时，请稍后再试~~')
        // 请求超时， err.code='ECONNREFUSED'
    } else if (axios.isCancel(reason)) {
        // 请求中断
        ElMessage.error('当前请求被中断了，请检查代码~~')
    } else {
        // 断网处理
        ElMessage.error('当前网络繁忙，请稍后再试~~')
    }


    // 提示过后，还是继续执行用户自己设定的catch方法
    return Promise.reject(reason)
})

export default http2

 */