axios使用方法(详细说明)

Axios是一款在浏览器和Node.js中使用的基于Promise的HTTP库。它支持Promise API,可以拦截请求和响应,转换请求数据和响应数据,取消请求,并自动转换JSON数据。在Vue中,可以通过vue-axios插件或挂载到Vue原型链上来使用。文章详细介绍了axios的安装、基本使用、配置项初始化以及与其他前端框架如Vue的集成方法。
摘要由CSDN通过智能技术生成

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

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

安装

使用npm安装

npm install axios

使用 bower安装

bower install axios

使用 cdn引入:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

例子:

1.结合 vue-axios使用

**看了vue-axios的源码,它是按照vue插件的方式去写的。那么结合vue-axios,就可以去使用vue.use方法了

首先在主入口文件main.js中引用:**

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

之后就可以使用了,在组件文件中的methods里去使用了:

getNewsList(){
      this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
}

2. axios 改写为 Vue 的原型属性

首先在主入口文件main.js中引用,之后挂在vue的原型链上:

import axios from 'axios'
Vue.prototype.$ajax= axios

在组件中使用:

this.$ajax.get('api/getNewsList')
.then((response)=>{
    this.newsList=response.data.data;
}).catch((response)=>{
    console.log(response);
})

局部使用

直接引入:

import axios from 'axios'

常用的配置项初始化

//  常规配置项
axios.defaults.baseURL = 'https://127.0.0.1:9999'; //  请求服务器具体的地址
axios.defaults.withCredentials  =true; //  在跨域中允许携带凭证
axios.defaults.header['Content-Type'] = 'application/x-www-form-urlencoded';//  声明传给服务器的数据,通过请求传给服务器的数据application/x-www-form-urlencoded格式
axios.defaults.headers.common["token"] = token; //  携带token请求头

//  请求拦截器:当我们通过porps请求向服务器发请求的时候,能拦截到请求主体信息,然后把请求主体传递进来的json格式的对象,变成urlencoded 某某某等于&某某某格式发送给服务器
axios.defaults.transformRequest = function (data) {
    if (data) return data;
    let result = ``;
    for (let attr in data) {2
        if(!data.hasOwnProperty(attr)) break;
        result += `&${attr}=${data[attr]}`;
    }
    return result.substring(1);
};
//  响应服务器:接受服务器返回的结果,把返回的结果,因为它的anshuosi从服务器获得的结果response对象当中包含了很多信息,既有响应头也有相应主体的信息,xx配置信息。
//  现在只拿到data,如果有错误就抛出错误的Promise,
axios.interceptor.response.use(function onFultfilled(response) {
    //  成功走这个
    return response.data;
}, function onRejected(reason) {
    //  失败走这个
    return Promise.reject(reason);
});
//  验证什么时候成功失败,用正则检验,自定义成功失败,主要以http状态码
axios.dafaults.validateStatus = function (status) {
    //  http状态码,2或者3开头的都是成功,默认只有2开头的才能成功
    return /^(2\3)\d{2}$/.test(status);
}

使用方式示例

1.执行get数据请求

axios.get('url',{
    params:{
        id:'接口配置参数(相当于url?id=xxxx)'},
})
.then((res)=>{
    console.log(res);   //  处理成功的函数 相当于success
})
.catch((error)=>{
    console.log(error)  //  错误处理 相当于error
})

2.执行post数据发送

const data = {
    name:'张三',
    age:23
}
axios.post('url',data)
.then((res)=>{
    console.log(res);   //  处理成功的函数 相当于success
})
.catch((error)=>{
    console.log(error)  //  错误处理 相当于error
})

3.执行delete 数据发送

//  如果服务端将参数作为java对象来封装接受
axios.delete('demo/url', {
    data: {
        id: 123,
        name: 'Henry',
    },
    timeout: 1000,
})
//  如果服务端将参数作为url参数来接受,则请求的url为:www.demo/url?a=1&b=2形式
axios.delete('demo/url', {
    params: {
        id: 123,
        name: 'Henry',
    },
    timeout: 1000
})

4.执行put 数据发送

axios.put('demo/url', {
    id: 123,
    name: 'Henry',
    sex: 1,
    phone: 13333333
})

5.携带请求头

axios设置请求头中的Authorization信息:

GET请求

this.$axios.get('/url', 
    {
        headers: {
            'Authorization': 'Bearer '+localStorage.getItem('token'),
            'token': '  '
            ...
        },
        params: {
            param1: string,
            param2: string
        },
        ...
    }
)
.then(res => fn)
.catch(err => fn)

POST请求

this.$axios.post('/url', param,
    {
        headers: {
            'Authorization': 'Bearer '+localStorage.getItem('token'),
            'token': '  '
            ...
        }
        ...
    }
)
.then(res => fn)
.catch(err => fn)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值