Axios使用方式

ajax是JQUERY封装的XMLHttprequest用来发送http请求

Axios简单点说它就是一个js库,支持ajax请求,发送axios请求功能更加丰富,丰富在哪不知道

1.npm使用方式

       vue项目中 npm install axios

2.cdn方式

        

        

3.使用本地文件

        

axios 带有拦截器功能:分别是请求拦截器   应答拦截器(就是响应拦截器)

第三种方式需要将axios文件下载到本地,下载方式

GITHUB上下载   地址 GitHub - axios/axios: Promise based HTTP client for the browser and node.js

在 GitHub 仓库页面，点击 "Code" 按钮，然后选择 "Download ZIP" 以下载包含所有文件的压缩文件。

解压下载的 ZIP 文件。

在解压后的文件夹中，你可以在 dist 文件夹中找到 axios.min.js 文件。

解压后点进去dist 文件夹中找到 axios.min.js 文件。

下面用VsCode练习下axios

1.GET无参

   

   

   

   

   

   

   

    使用axios发送get请求,无参数

   

这是因为跨域问题

2.GET请求带参数

   

   

   

   

   

   

   

    使用axios发送get请求,无参数

    使用axios发送get请求,带参数

   

上面这样是传统传参方式

axios使用配置项目params

   

   

   

   

   

   

   

    使用axios发送get请求,无参数

    使用axios发送get请求,带参数

    使用axios发送get请求,带参数,使用axios配置项方式

   

params是一个{}对象   

那么也可以

var data={

        xxx:xxx

        yyy:yyy

}

然后里面

params:data 即可

例如

Axios发送POST请求

后端接收可以是单个接收  也可以是实体类

用AXIOS发送Post请求    application/json

后端接收

这个请求会发送预请求    实际上是两个请求

     预请求

AXIOS也可以像ajax那样配置项的方式发送请求

下面两种方式使用POST    PUT   PATCH

这种方式默认Content-Type是application/json

AXIOS的返回值

AXIOS的拦截器

拦截器分两种,分别是

请求拦截器:在发起请求之前执行,可以对请求内容做修改,比如增加参数,设置请求头等等

应答拦截器(相应拦截器):服务器返回结果,AXIOS的then之前先执行,可以对应答内容做处理

请求拦截器写法

axios.interceptors.request.use(function(xxx){     记得return xxx},function(yyy) {如果错误做错误处理});

响应拦截器

AXIOS进行全局默认配置