axios的基本使用

在项目根目录下创建js目录，目录中添加axios.min.js文件

准备页面：testAxios.html: 实现一个简单的GET请求

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
    <button onclick="f1()">发起get请求例子1</button>
    <script>
		function f1(){
            let url="http://localhost:8000/ylb/api/v1/user/query?uid=1021";
            axios.get(url).then( (resp)=>{
                console.log("请求成功，服务响应数据="+resp)
            }).catch((err)=>{
                console.log("请求失败："+err)
            }).finally(()=>{})

			//类比jquery请求
			$.ajax({
				url:ur1,
				method:"get",
				success:function(resp){}
			})
        }
    </script>
</body>
</html>

这里是用axios发起一个GET请求。其中
then：是一个函数，表示请求成功时执行的
resp ：是形参，表示服务器返回的数据，这个数据是由axios封装好的

注意箭头函数：

箭头函数就是为了简化普通函数定义而创造的。

类比一下：

javascript 复制代码

//普通函数：
function funName(参数1，参数2){
	结构体
}

//箭头函数：
(参数1，参数2)=>{
	结构体
}

如果使用普通函数，axios请求为：

javascript 复制代码

axios.get(url).then(funName(resp))

使用axios的配置项发起请求

javascript 复制代码

function func1(){
	let url="http://localhost:8000/ylb/api/v1/person";
	axios({
		url:url,
		method:"post",
		data:{
            'name':'zhangsan',
            'passwd':'111222'
        }
	}).then((resp)=>{
		console.log("resp="+resp)
	}) .catch( (error)=>{
        console.log("错误="+error)
    })
}


function func1(){
	let url="http://localhost:8000/ylb/api/v1/person";
	axios({
		url:url,
		method:"get",
		params:{
			uid: 001
		}
		
	}).then((resp)=>{
		console.log("resp="+resp)
	})
}

重要配置项：

javascript 复制代码

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认是 get

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
	
// `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },	
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
 data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,

使用别名方法

axios.get(url $, config$ )

axios.delete(url $, config$ )

axios.post(url $, data\[, config$ ])

axios.put(url $, data\[, config$ ])

axios返回数据

javascript 复制代码

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}

请求和应答拦截器

请求拦截器作用：当发起请求时，需要经过请求拦截器的处理一些公共的事情后，再发送给服务端。例如用请求拦截器给每一个请求加上token参数。

应答拦截器作用：服务器返回结果，axios的then之前先执行。可以对应答内容对预先的处理。

示例：

javascript 复制代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>

<body>
    <button onclick="f1()">请求拦截器</button>
    <script>
        //请求拦截器
        axios.interceptors.request.use(function(config){
            //请求之前做些什么：比如改变请求参数，设置timeout等等
            console.log("======请求之前=====")
            config.url = config.url+"&name=lisi";
            return config;
        },function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        })

        //应答拦截器
        axios.interceptors.response.use(function(response){
            //对响应做什么
            console.log("=====响应数据了=======")
            return response;

        },function(error){
            // 对响应错误做点什么
            return Promise.reject(error);
        })


        function f1(){
            let url="http://localhost:8000/ylb/api/v1/user/query?uid=1021";
            axios.get(url).then( (resp)=>{
                console.log("请求成功，服务响应数据="+resp)
            }).catch((err)=>{
                console.log("请求失败："+err)
            })
        }


    </script>
</body>

注意：

其中的config和response

config：请求的配置

response：服务器返回的数据

1.5全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';

axios.defaults.timeout=50000;

axios.defaults.headers.common $'Authorization'$ = AUTH_TOKEN;

axios.defaults.headers.post $'Content-Type'$ = 'application/x-www-form-urlencoded';