axios为什么提供单独创建实例方法?为什么创建不同实例?

默认会导出实例axios,通常只需使用这个axios就可以了。
但是有时候你需要创建多个实例,比如你需要访问多个服务地址,而这些服务请求和响应的结构都完全不同,那么你可以通过axios.create创建不同的实例来处理。
比如axios1是用http状态码确定响应是否正常,而axios2是服务器自己定义的状态码,又或者他们请求头不同,支持的content-type不同,那么我可以单独为axios1和axios2写拦截器。

其实还有一个和性能相关的好处,同一个axios保留了一个和服务器建立的长链接。你当然不希望,每次请求都要重新建立连接。

axios为什么创建实例?

原因是当我们axios模块中导入对象时,使用的是默认的实例,当给这些实例设置默认配置时这些配置就被固定下来了,但后续开发中某些配置或许会不一样,如timeout,content-Type、Authorization、token等,这时我们就可以创建新的实例,并传入属于该实例的配置信息:

axios实例的配置

Bash

## axios实例的配置
//常用的基本配置
    axios.create({
        baseURL:'http://localhost:8080', //请求的域名,基本地址
        timeout:5000,  //请求的超时时长,单位毫秒
        url:'/data.json',  //请求的路径
        method:'get,post,put,patch,delete' , //请求方法
        headers:{
            token:''  //比如token登录鉴权,请求的时候携带token,让后端识别登录人的信息
        },   //请求头
        params:{},  //请求参数拼接在URL上
        data:{},    //请求参数放在请求体里

    })

哪里可以配置axios呢?

  • axios全局配置

Bash

## //axios.defaults.后边跟的就是axios的那些配置
//一般修改的全局配置,也就下边这两个
axios.defaults.timeout = 1000 
axios.defaults.baseURL = 'http://localhost:8080'
  • axios实例配置
//如果create()里不添加参数的话,在创建这个axios实例的时候,使用的就是全局的配置
// 这个时候instance的timeout是1000
const instance = axios.create(); 

//如果设置了全局的配置,但是又想在创建的实例里修改配置怎么办
instance.default.timeout = 3000
  • axios请求配置
  let instance = axios.create();
    instance.get('/data.json',{
        timeout:5000
    })

具体的使用

在实际开发项目中,全局配置的局限性比较大,一般我们会全局配置两个参数:
**axios.defaults.timeout**和**axios.defaults.baseURL**
假如我们有两个请求接口,那么我们一般的做法是创建两个axios实例

const instance1 = axios.create({
      baseurl:'http://localhost:8080',
      timeout:'1000'
})

const instance2 = axios.create({
      baseurl:'http://localhost:9090',
      timeout:'3000'
})

//instance1这里用到的参数有 baseurl,timeout,method,url
instance1.get('/userinfo').then(res=>{
  console.log(res)
})

//instance2这里用到的参数有 baseurl,timeout,method,url,params,并且对timeout进行了修改
instance1.get('/orderlist',{
    timeout:'5000'
    params:{}
}).then(res=>{
  console.log(res)
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axios 是一个基于 Promise 的 HTTP 客户端,可以在浏览器和 Node.js 环境下使用。我们可以通过封装 axios 来实现网络请求的统一管理和处理,具体步骤如下: 1. 创建 axios 实例:我们可以通过创建 axios 实例来配置 axios 的一些默认选项,比如请求超时时间、请求头信息、请求拦截器和响应拦截器等。 ```javascript import axios from 'axios' const instance = axios.create({ baseURL: 'http://api.example.com', timeout: 5000, headers: { 'Content-Type': 'application/json' } }) // 添加请求拦截器 instance.interceptors.request.use(config => { // 在发送请求之前做些什么 return config }, error => { // 对请求错误做些什么 return Promise.reject(error) }) // 添加响应拦截器 instance.interceptors.response.use(response => { // 对响应数据做点什么 return response.data }, error => { // 对响应错误做点什么 return Promise.reject(error) }) export default instance ``` 2. 封装网络请求方法:我们可以根据实际需求封装不同的网络请求方法,比如 GET、POST、PUT、DELETE 等。在请求方法中,我们可以通过调用 axios 实例方法来发送网络请求,并对请求结果进行处理。 ```javascript import axios from './axios' export function get(url, params) { return axios.get(url, { params }) } export function post(url, data) { return axios.post(url, data) } export function put(url, data) { return axios.put(url, data) } export function del(url) { return axios.delete(url) } ``` 通过封装 axios,我们可以实现网络请求的统一管理和处理,提高代码的复用性和可维护性。在实际开发中,我们可以根据具体情况来封装网络请求方法,以满足不同的业务需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值