axios基本使用

一、 axios简介

功能特点：

	1、在浏览器中发送XMLHttpRequests 请求
	2、在node.js中发送http请求
	3、支持Promise API
	4、拦截请求和响应
	5、转换请求和响应数据

二、项目中安装axios库，在组件中想要网络请求时先引入axios

cnpm install axios -S
模块中引用：
import axios from ‘axios’

三、使用方法

1、发送简单的 get请求，发送post请求需要进一步处理，参考：https://blog.csdn.net/qq_41000891/article/details/82902294

1.1 基本用法，默认get

axios({
	url:"请求数据的服务器地址",
	method:"get",
	timeout:5,
	}).then(res=>{
	"对res进行操作"
})

1.2 发送get请求时 地址带有问号？及参数，例如 “http://123.207.32.32:8000/home/data?type=sell&page=3”,用下面的请求方式，axios发送请求时 会自动拼接params里的参数

axios（{
	url:"http://123.207.32.32:8000/home/data?",
	timeout:5,
	params:{           //注意post请求 要用data传参
	type:sell,
	page:3
},
}).then( )

2、axios发送并发请求

 axios.all( [ axios(),axios()] ).then(results=>{  '操作results' })  //results也是一个数组[res1,res2]
	  也可以调用spread方法，将结果展开:
	  axios.all( [ axios(),axios()] ).then(axios.spread((res1,res2)=>{
	console.log(res1)
	console.log(res2)
})）

3、全局配置axios 相关信息

在axios的参数里有一些多次重复使用的参数，可以进行全局初始化设置，这样在后续调用时，就不用再写重复的代码
例如 url 可以用 axios.defaults.baseURL="http://123.207.32.32:8000”
例如请求时间： axios.defaults.timeout
这样设置初始化参数后可以调用

     axios（{                      // 请求时间可以省略
			url:"/home/data?"  //前面重复的地址可以省略
			params:{
			type:sell,
			page:3
			}
}）

四、axios 创建实例和模块封装

1、创建实例

const axios1 = axios.create({
	basURL:"http://123.207.32.32:8000",
	timeout:3000
	})
	
	axios1({ 
	url:"/home/data?",
	params:{...}
	}).then()
	// 再次调用（url换成其他路由）
	axios1({ 
	url:"/home/list"
}).then()

2、axios模块封装 4中封装方法

因为如果以后axios这个http库不再维护，在项目中就需要改动很多地方，而封装成自己的模块就可以解决这种问题
单独创建一个文件夹network，在文件夹里创建request.js文件
在这里写代码

2.1、

import axios from "axios"

export function (config,success,failure){  //config是一个包含参数的对象,success和failure是两个回调函数
//创建axios实例
const  instance = axios.create({
	baseURL:"...",
	timeout:3000
})

instance(config).then(
		console.log(res);
		success(res)
	).catch(err=>{
		console.log(err)
		failure(err)
	})
}

在其它地方调用时
先导入

import {request} from "./network/request"
request({
	url:"...",
},res=>{},err=>{}) 

2.2

也可以在封装时 把形参变成一个对象

import axios from "axios"
import axios from "axios"
export function (config){  //config是一个包含参数的对象,success和failure是两个回调函数
//创建axios实例
    const instance = axios.create({
        baseURL:"...",
        timeout:3000
    })
    
    instance(config.baseConfig).then(
        console.log(res);
        config.success(res)
    ).catch(err=>{
        console.log(err)
        config.failure(err)
    })
}

在其它地方调用时
先导入

import {request} from "./network/request"
然后调用：
request({
	baseConfig:{...},
	success:function(res){ },
	failure:function(err){ },
}) 

2.3、

import axios from "axios"
export function (config){  //config是一个包含参数的对象,success和failure是两个回调函数
   return new Promise((resolve,reject)=>{
        //创建axios实例
        const instance = axios.create({
            baseURL:"...",
            timeout:3000
            })
            
        //instance本身就是Promise
        instance(config).then(res=>{  //参考二阶段Promise笔记
            resolve(res))
        }).catch(err=>{
            reject(err))
        })
   })
}

在其它地方调用时

 先导入 
import {request} from "./network/request"

然后调用：
request({
	url:"...",
}).then(res=>{ }).catch(err=>{ }) 

2.4、

其实上面的代码中可以不用Promise,直接return instance(config) 因为

instance(config)   本身就是Promise对象

import axios from "axios"
export request1=function (config){  //config是一个包含参数的对象,success和failure是两个回调函数
    //创建axios实例
    const instance = axios.create({
        baseURL:"...",
        timeout:3000
        })   //创建好instance实例后就可以调用instance（）了，括号里填写路由地址和参数
        
    //instance本身就是Promise
    return instance(config)
}

在其它地方调用时
先导入

import {request1} from "./network/request"
然后：
request1({
	url:"...",
}).then(res=>{ }).catch(err=>{ }) 

五、axios拦截器

1、请求成功、请求失败、响应成功、响应失败都可以拦截

import axios from "axios"
export request1=function (config){  //config是一个包含参数的对象,success和failure是两个回调函数
  //1、创建axios实例
    const instance = axios.create({
        baseURL:"...",
        timeout:3000
        })   //创建好instance实例后就可以调用instance（）了，括号里填写路由地址和参数
        
        
        
     // 2、axios的拦截器（这里在实例中应用，也可以在全局中使用）
        分类：
        instance.interceptors.request;  //发送请求时拦截
        instance.interceptors.response;//响应时拦截，服务器返回数据时
        
        
        请求拦截的使用：
        .use()方法  拦截后使用拦截的数据
            use()里第一个参数是请求成功时的回调函数，第二个是失败时的回调函数
            请求拦截成功时的回调函数必须要有返回值，拦截后要返回的
         instance.interceptors.request.use(config=>{  //config为要传给服务器的参数
             return config
             //这里可以做什么事？
             1、发送网络请求时可以添加请求的图标动画（圆圈），在返回响应时取消
             2、每次登录时必须携带特殊信息：token令牌等，在这里判断有没有token，然后进行后续处理 
         },err=>{})
         
         
         响应拦截的使用
        instance.interceptors.response.use(res=>{//res为服务器返回的数据，（返回的数据中axios模块会添加一些额外的数据）
            return res
        },err=>{
        
        })
        
        
        
    //3、返回instance ，instance()本身就是Promise
    return instance(config)
}

#六、封装
import { AxiosRequestConfig } from ‘axios’;
declare const request: {
(setting: AxiosRequestConfig): any;
REQ_TYPE: {
URL: string;
JSON: string;
NO: string;
};
beforeRequest: (cbFun: Function) => void;
beforeResponse: (cbFun: Function) => void;
};
export default request;