什么是 axios?

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

2、特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

3、安装步骤

npm install axios 或者 yarn 或者 cnpm

4、axios的原理:

// 封装Ajax,实现axios进行回调

 var axios = {
        get: function(url){
            return new Promise((resolve,reject) => {
                var  xhr = new  XMLHttpRequest();
                xhr.open('get',url,true) ;

                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 从服务端获取数据
                        // fn.call(this, xhr.responseText)
                        resolve(xhr.responseText)
                    }
                };
                xhr.send();

            })              
        },
    }

axios API

可以通过向 axios 传递相关配置来创建请求
axios(config) config是一个配置选项对象: {属性名:属性值}

{
    method:"get" || "post",
    url:"url地址",
    //post请求  数据放在data中
    data:{
        username:"admin",
        password:"admin"
    },
    //get请求:  数据放在params中    字符串拼接
    params:{
        username:"admin",
        password:"admin"
    },
    headers:{
        token: "一窜字符串"
    },
    timeout: 3000 
    
}
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
}
});

实例方法 http请求方法封装的

以下是可用的实例方法。指定的配置将与实例的配置合并。
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

并发 基于promise封装 Promise.all() Promise.race() Promise.spread()

处理并发请求的助手函数
axios.all(iterable) axios.all([getUser(),getNumber(),getProduct()])
axios.spread(callback)

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

axios请求的使用

	<template>
	  <div class="hello">
	    <h2> axios的使用</h2>
	    <a href="javascript:"   class="btn btn-primary"  @click="get">GET请求</a>
	    <a href="javascript:"   class="btn btn-primary"  @click="post">POST请求</a>
	    <a href="javascript:"   class="btn btn-primary"  @click="http">HTTP请求</a>
	  </div>
	</template>

	<script>
	import axios from "axios"
	export default {
	  name: 'HelloWorld',
	  data () {
	    return {
	     
	    }
	  },
	  methods:{
	    get(){
	      axios.get("https://cnodejs.org/api/v1/topics",{
	        //get参数
	        params:{
	          tab:"share",
	          page:3
	        },
	        headers:{
	          token:"tom"
	        }
	      }).then(res=>{
	        console.log(res)
	      }).catch(error=>{
	        console.log(error)
	      })
	    },
	    post(){
	      axios.post(
	      "https://cnodejs.org/api/v1/accesstoken",
	      {
	        //post参数
	        accesstoken:"80afb815-b9f6-48e7-8370-7647e4d74d87"
	      },
	      {
	        headers:{
	          token:"tom"
	        }
	      }  
	      ).then(res=>{
	        console.log(res)
	      }).catch(error=>{
	        console.log(error)
	      })
	    },
	    http(){
	      axios({
	        //url:"https://cnodejs.org/api/v1/topics",
	        //method:"get",
	        //get参数
	        //params:{
	        //  tab:"share",
	        //  page:2
	        //},
	        url:"https://cnodejs.org/api/v1/accesstoken",
	        method:"post",
	        //post请求参数 
	        data:{
	          //post参数
	          accesstoken:"80afb815-b9f6-48e7-8370-7647e4d74d87"
	        },
	        headers:{
	          token:"tom"
	        },
	        timeout: 10000,
          }).then(res=>{
	        console.log(res)
	      }).catch(error=>{
	        console.log(error)
	      })
	    }
	  }
	}
	</script>
## 取消axios请求
		使用 cancel token 取消请求
	Axios 的 cancel token API 基于cancelable promises proposal,它还处于第一阶段。
	可以使用 CancelToken.source 工厂方法创建 cancel token,像这样:
	

你可能感兴趣的:(javascript,前端,node.js)