axios基本使用

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

主要作用:

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

开发中常用来拦截请求和响应

 

axios github官网地址  (https://github.com/axios/axios)

各大浏览器对axios的支持情况:

axios如何使用?

 

方式一:使用npm安装

$ npm install axios

方式二:浏览器安装:

$ bower install axios

方式三:下载axios本地使用:

 <script src="js/axios.js"></script>

首先在本地服务器新建test.php测试文件:

代码如下:

<?php
header("Access-Control-Allow-Origin:*");
header('Access-Control-Allow-Headers:x-requested-with,content-type');

//$name = $_GET["userName"];
//$pwd = $_GET["userPwd"];
//$arr = array("code=>0","username"=>$name,"password"=>$pwd);
//echo json_encode($arr);

$rws_post = $GLOBALS['HTTP_RAW_POST_DATA'];
$mypost = json_decode($rws_post);
$name = (string)$mypost->userName;
$pwd = (string)$mypost->userPwd;
$arr = array("code=>0","username"=>$name,"password"=>$pwd);
echo json_encode($arr);

使用axios发送HTTP请求:

GET请求代码如下:

axios.get('http://127.0.0.1/vue/test.php?userName=fengy&userPwd=123456')
    .then(response =>{
        console.log(response.data);
    })
    .catch(error =>{
        console.log(error);
    })

POST请求代码如下:

axios.post('http://127.0.0.1/vue/test.php',{
        userName:"Fengy",
        userPwd:"123456"
    })
    .then(response =>{
        console.log(response.data);
    })
    .catch(error =>{
        console.log(error);
    })*/

自定义实例方式代码如下:

 //1.自定义一个axios实例
    var instance = axios.create({
        //用于存储一些公共信息
        //注意点:配置baseURL时候最好以/结尾
        baseURL: 'http://127.0.0.1/vue/test.php/',
        timeout: 1000,
    });
    //2.利用自定义的axios实例发送请求
    //注意点:发送请求的时候最好不要以/结尾
    instance.post('test.php',{
        userName:"Fengy",
        userPwd:"123456"
    })
    .then(response =>{
        console.log(response.data);
    })
    .catch(error =>{
        console.log(error);
    });

配置全局方式代码如下:

  //配置全局的baseURL
    axios.defaults.baseURL = 'http://127.0.0.1/vue/test.php/';
    axios.post('test.php',{
        userName:"Fengy",
        userPwd:"123456789"
    })
    .then(response =>{
        console.log(response.data);
    })
    .catch(error =>{
        console.log(error);
    })

通过发送请求最终给我们返回的结果如下:

 

请求方法的别名

为方便起见，为所有支持的请求方法提供了别名

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

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

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

axios.patch(url[, data[, config]])

 

axios的基本使用与Ajax基本类似,Vue2.X项目基本使用axios框架请求数据