axios个人总结

Posted 2020-11-25 zhenyjsf

1.axios安装

npm install axios

import axios from ‘axios‘

　　

 

2.axios使用

使用格式是

1.axios({配置信息}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})
//res为得到的数据，其中res.data是得到的数据，其余都是axios自动携带的数据;
//axios整合了Promise的可存储功能，所以可以像对象一样储存得到的数据;

2.axios.get(‘url‘,{params:{内部放置get专用参数}}) ;
//get请求专用，放置在params中的参数会自动的衔接到url地址后，当然也可以直接写在url中;

3.axios。post(‘url‘,{data:{内部放置post专用参数}});
//post请求专用，post参数必须放置在设置的data属性中;

4.axios.delete(‘url‘,{});
5.axios.head(‘url‘,{});
6.axios.put(‘url‘,{});
....

axios最简单的申请依然是第一行

　　

 

3.基础配置（全局配置）

axios（指最简单申请）只有一个参数`{配置参数}`，该参数在很多次请求中是有很多配置属性是重复的，所以可以设置一个全局配置，类似js对象的原型链配置

注意：全局配置后，本次项目所有的axios会默认使用该配置，全局配置下相同配置只能有一个，例如，不能同时存在两个baseURL

axios.defaults.配置属性 = ‘值’
//相当于修改了本次项目axios的默认属性

 

4.常用配置

请求地址 url:‘...‘

请求类型 method:get //默认为get

请求根路径 baseURL:"https://www.baidu.com/" //在url不为绝对定位的情况下，根路径会自动加在url之前

请求前的数据处理 transformRequest:(data)=>{...} 

请求后的数据处理 transformResponse:(data)=>{...}

自定义请求头 headers:{...}

get请求参数 params:{...}

post请求参数 data:{...}

参数序列化（JSON）函数 paramsSerializer:(params)=>{...}

 

5.axios实例化

为何要实例化：由于全局配置关系，整个axios只能拥有一个全局配置，而实例化相当于可以拥有多个不同的配置而调用

通过import axios from ‘axios‘ 得到的axios是全局axios，在全局axios上设置配置既是全局配置，

全局axios ==生成==》 axios实例 （在实例上配置，即该实例上的全局配置，简称实例配置）

在面对不同的服务器时，生成对应的实例

生成方法

const instancel = axios.create({内部写入的配置即为实例配置})

instancel拥有和axios相同的方法，在创造该实例配置时候写入的配置为该实例全局共享
instancel({ url:‘...‘ }).then(res=>{...}) //实例申请方法

 

6.axios注意事项

思路：axios仅引用一次，在requrst.js中，该文件中仅创建axios实例并引导出，由其他文件（home.js）来用不同实例来写成对应的申请函数，最后由其他vue文件进行引用这些函数进行申请

 

axios → requrst.js（创建不同实例并返回，baseURL放在其中）→home.js（接受实例，并创建对应的申请函数）→ vue文件（引用home.js或对应的函数，调用并获得申请的值）

为什么要这样做，因为是第三方程序，为防止不再更新或者大面积修改，这样做的话，仅修改的文件只有requrst.js，其余文件的输入输出由自己手写，保证功能正常即可正常运行

以下为详细代码

requrst.js

 import axios from ‘axios‘;
export function request(config){
    const instance = axios.create({
        baseURL:"...",
        // baseURL:"...",
        timeout:0000
    });
    
    // 发送真正的网络请求
    return instance(config);
}

home.js

import { request } from ‘./request.js‘

export function getHomeMultidata() {
    return request({ url: ‘/home/multidata‘ })
}

export function getHomeGoods(type, page) {
    return request({ url: ‘/home/data‘, params: { type, page } }) 
}

vue文件

<script>
    import { getHomeMultidata } from "@network/home.js"; //引用
    
    mounted(){
    getHomeMultidata().then(res => { //执行
      this.banners = res.data.banner.list;
      this.recommends = res.data.recommend.list;
    });
    }

</script>

　6.拦截器

待更新