axios是干嘛的？

axios是什么？是干什么的？

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

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

为啥选 axios ？

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

1、传统的 Ajax 是基于 XMLHttpRequest（XHR）

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

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

jQuery-Ajax 相对于传统的Ajax来说就比较好用了，但是在 Vue 的开发过程中不需要使用 jQuery ，而且jQuer来源gaodaimacom搞#代%码网y是个比较重量级的框架，没有必要为了方便进行一个网络请求，特意引入一个 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是干嘛的？的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)