axios是干嘛的?

axios是什么?是干什么的?

Axios是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

axios:前端通信框架,因为vue的边界很明确,就是为了处理DOM,所以并不具备通信功能,此时就需要额外使用一个通信框架与服务器交互;当然也可以使用jQuery提供的AJAX通信功能。

1.png

为啥选 axios ?

在 Vue 的开发过程中能实现发送网络请求的方式有很多种,下面详细看一下每种方式和选 axios 的原因:

1、传统的 Ajax 是基于 XMLHttpRequest(XHR)

因为在项目开发中封装它的过程比较麻烦,配置和调用方式也比较混乱,一般开发不会用这种方式,而是用 jQuery-Ajax 。

2、jQuery-Ajax,相对于传统的 Ajax 非常好用

jQuery-Ajax 相对于传统的Ajax来说就比较好用了,但是在 Vue 的开发过程中不需要使用 jQuery ,而且jQuery是个比较重量级的框架,没有必要为了方便进行一个网络请求,特意引入一个 jQuery。这是 jQuery-Ajax 的 传送门

3、Vue官方曾推出过 Vue-resource 插件

Vue-resource 的体积相对于 jQuery 小很多。但是到目前来Vue 2.0 版本推出之后,尤小右同学 说以后不再对 Vue-resource 进行维护和更新了,所以说继续用这种方式开发项目会有很大隐患哦。

4、尤小右同学 在说明不再继续更新和维护 Vue-resource 的同时,还推荐了一个框架 axios 。

axios 有非常多的优点并且用起来也非常方便,它支持在浏览器中发送 XMLHttpRequests 请求,支持在node.js中发送 http 请求,支持 Promise API,可以拦截请求和响应,可以转换请求和响应数据。(反正就是很牛逼,还不赶紧用你是在寻思啥呢?)

axios 的基本使用

1、先说一下怎么安装和引入:

npm install axios --save    //项目中安装
 
import axios from 'axios'    //使用前引入

2、axios 有很多请求方式,具体可以看一下官网的API,下面说一下最基本的使用方式:

axios({
  url:'http://127.0.0.1:8000/home/login',  //这里写你要发请求的服务器url
  method:'get'//(默认是get请求)
}).then(res => {
  console.log(res);    //在控制台查看请求的数据
})
 
axios({        
  url:'http://127.0.0.1:8000/home/register',  //这里写你要发请求的服务器url
  params:{      //专门针对get请求的参数拼接,如果是post请求用 data:{}
    type:'',
    page:
  }
}).then(res => {
  console.log(res);    //在控制台查看请求的数据
})

3、axios 发送并发请求:axios.all 方法可以放入多个请求的数组,它返回的也是一个数组,可以用 axios.spread 将数组展开

axios.all([axios({
  url:'http://127.0.0.1:8000/home/login'        //第一条请求的url
}),axios({
  url:'http://127.0.0.1:8000/home/register',       //第二条请求的url
  params:{      //专门针对get请求的参数拼接,如果是post请求用 data:{}
    type:'',
    page:
  }
})]).then(results => {    //两条请求都拿到之后再做下一步操作
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})
 
 
axios.all([axios({
  url:'http://127.0.0.1:8000/home/login'        //第一条请求的url
}),axios({
  url:'http://127.0.0.1:8000/home/register',       //第二条请求的url
  params:{      //专门针对get请求的参数拼接,如果是post请求用 data:{}
    type:'',
    page:
  }
})]).then(axios.spread((res1,res2) => {    //用 axios.spread 将数组展开
  console.log(res1);
  console.log(res2);
}))

axios 相关配置

1、如果发送多个请求的话,每个请求的 url 前缀,超时时间等设置都是一样的,这样可以将重复的信息进行抽取:

//比如发送的第一个请求的 url 是:http://127.0.0.1:8000/home/login
//比如发送的第一个请求的 url 是:http://127.0.0.1:8000/home/register
 
//这样就可以对两个 url 的前缀进行抽取:http://127.0.0.1:8000
 
//使用全局的 axios 和对应的配置进行网络请求
axios.defaults.baseURL ='http://127.0.0.1:8000'
axios.defaults.timeout = 5000    //请求超时时间也可以提取
axios.all([axios({
  url:'/home/login'
}),axios({
  url:'/home/register',
  params:{          //专门针对get请求的参数拼接,如果是post请求用 data:{}
    type:'sell',
    page:5
  }
})]).then(axios.spread((res1,res2) => {
  console.log(res1);
  console.log(res2);
}))

2、axios 还有一些其他的配置选项,详细可以移步 axios 官网 Config API 。

axios 实例

1、为啥要创建 axios 实例:

如果项目比较大的话,考虑到并发量比较高,一个服务器可能满足不了整个业务的需求,这个时候就可能会用到多个服务器,这样的话服务器的 url 不一样,如果还是对 url 进行全局配置 baseURL 就不合适了,针对这一问题(也就是服务器不在一个 ip 地址里 ),单独创建 axios 实例就会方便很多。创建不同的实例,每个实例都有不同的配置,可以满足业务复杂的需求。

2、怎么创建 axios 实例,并用 axios 实例发送请求:

const instance1 = axios.create({    //创建对应的 axios 实例
  baseuRL:'http://127.0.0.1:8000',
  timeout:5000
})
 
instance1({            //直接用实例发送请求
  url:'/home/ligin'
}).then(res =>{
  console.log(res);
})
 
instance1({            //直接用实例发送请求
  url: '/home/register',
  params: {        //专门针对get请求的参数拼接,如果是post请求用 data:{} data:{}
    type: '',
    page: 
  }
}).then(res =>{
  console.log(res);
})
 
 
const instance2 = axios.create({    //再创建一个 axios 实例
  baseuRL:'http://111.000.000.001:8000',
  timeout:10000
})
......

axios 模块封装

1、为啥要封装 axios 模块:

如果对每个需要发送网络请求的组件都引入 axios 的话,这样整个项目对 axios 的依赖性太大了,一旦 axios 崩了,或者像 Vue-resource一样被官宣不再继续维护了,那你这个项目就 mmp 了懂吧,所以就要对 axios 模块进行封装,单独搞一个文件对 axios 做一个封装,之后所有的组件在进行网络请求的时候都面向这一个文件,假如一旦有一天 axios 不再维护了,也根本不慌,只需要对 axios 封装的文件进行修改就完事了,真是个小机灵鬼。

2、怎么封装 axios 模块:一般新建一个 request.js 文件用来封装 axios;

import axios from 'axios'
 
export function request(config) {
    //创建axios实例
    const instance = axios.create({
        baseURL:'http://127.0.0.1:8000',
        timeout:5000
    })
 
    //发送真正的网络请求
    return instance(config)
}

3、在需要发送网络请求的地方调用这个request 方法:

import request from  "./request"
 
request({
  url:'/home/login'
}).then(res => {
  console.log(res)
}).catch(err =>{
  console.log(err)
})

如果有一天 axios 真崩了,只需要把 request.js 文件的代码改一下,也 return 一个结果出来就 ok 了。

想要了解更多相关知识,可访问 前端学习网站!!

以上就是axios是干嘛的?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏