vue前后端交互axios用法

基本用法：axios.get('/adata')

.then(ret=>{

data属性名固定的，用于获取后台响应的数据

        console.log(ret.data)

)

可以通过params直接传参get方法，比较方便，也可以用delete

axios.get('/adata'),{

params:{

id:123

.then(ret=>{

data属性名固定的，用于获取后台响应的数据

        console.log(ret.data)

)

用post方法传参数不用params可以直接写成对象形式

URLSEarchParams传参

例：var params = new URLSearchParams();

        params.append('uname', 'zhangsan');

        params.append('pwd', '123')

axions响应结果：data：实际响应回来的数据

                               header:响应头信息

                                status:响应状态码

                                statusText:响应状态信息

axios.defaults.timeout=3000:超时时间

axios.defaults.baseURl=http:.....:默认地址

axios.defaults.header['mytoken']=....:设置请求头

拦截器：更加的灵活，在发送请求之前进行处理

axios.interceptors.request.use(function(config) {

            console.log(config.url)

            config.headers.mytoken = 'nihao';

            return config;

        }, function(err) {

            console.log(err)     })

async/await异步函数用法：

async function queryData() {

      var ret = await axios.get('adata');

    console.log(ret.data)

   return ret.data;}

fetch和axios区别：

1.fetch有独特的text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据

2.有独特的method方法来定义用户请求参数的类型post,get等等

3.fetch用json的方法传递参数需要转换类型

4.axions注意data属性是固定的用法，用于获取后台的实际数据

5.axios有独特的params方法传递参数，post传递可直接写

6.axios不用转成json格式也可以用，axios方法自带

7.axios有独特的拦截器，可以拦截数据，以后可以用拦截器直接获取到数据

代码演示：

axios.interceptors.response.use(function(res) {

console.log(res)

      var data = res.data;

      return data;

    }, function(err){ console.log(err) })