huanggr
简介
基于Promise用于浏览器和nodejs的与服务端通信库
特征
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
使用:
node: cnpm install axios –save
大家可以使用模拟数据进行使用（模拟数据官网）
http://easy-mock.com
本次使用本地的模拟数据，采用phpStudy软件，路径为http://localhost:8888/obj/resource.php，文件名为resource.php，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <?php // 指定允许特定域名访问 // header('Access-Control-Allow-Origin: https://localhost'); // // 响应类型 // header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS'); // // 响应头设置 // header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept'); /*这里填写的是允许访问的端口*/ //header('Access-Control-Allow-Origin:http://localhost:8888'); header('Access-Control-Allow-Origin:http://192.168.199.184:8080'); if(!empty($_GET['shap'])){ $value = array( array( 'id'=>1, 'price'=>3999, 'curprice'=>3000, 'title'=>'小米Max，未来科技', 'count'=>99 ), array( 'id'=>2, 'price'=>10000, 'curprice'=>1000, 'title'=>'华为手机，就是快', 'count'=>77 ), array( 'id'=>3, 'price'=>1999, 'curprice'=>999, 'title'=>'oppo r9，照亮你的美', 'count'=>99 ), array( 'id'=>4, 'price'=>10000, 'curprice'=>9999, 'title'=>'8848钛金手机', 'count'=>99 ), array( 'id'=>5, 'price'=>10000, 'curprice'=>1000, 'title'=>'华为手机，就是快', 'count'=>77 ), array( 'id'=>6, 'price'=>1999, 'curprice'=>999, 'title'=>'oppo r9，照亮你的美', 'count'=>99 ), ); if($_GET['shap']===true){ }else{ $num = $_GET['shap']; // echo $num; foreach($value as $val=>$key){ // echo '<pre>'; if((int)$key['id']==$num){ $oneVal = $key; $value=[]; $value=$oneVal; } } } $arr=array( 'status'=>0, 'message'=>$value , ); echo json_encode($arr); } ?> |
axios的初步使用
国瑞前端：本文主要使用vue-cli3.0环境搭建，我们首先安装依赖
1 | cnpm install axios --save |
然后再引入依赖（app.vue）：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <template> <div id="app"> <router-link to="/">vuex数据展示</router-link> <router-view/> </div> </template> <script> import axios from 'axios' export default { name: 'App', data () { return { } }, created () { axios({ method: 'get', url: "http://localhost:8888/obj/resource.php?shap=true" }).then((response) => { console.log(response) }) .catch((error) => { console.log(error); }) }, methods: { }, watch: { } } </script> <style> * { margin: 0; padding: 0; } </style> |
注意：
请求一般放置在created中，then表示的是成功之后做的事情，函数中传的就是获取到的数据，数据在dada中，catch表示失败之后的值，函数中会传入失败后的原因
7