2019-09-29 17:07:00 awba4090 阅读数 2

axios相关使用

一、axios安装

  • 使用npm安装axios
    npm install axios
  • 使用cnpm安装axios
    cnpm install axios
  • 使用yarn安装axios
    yarn install axios
  • 使用cdn链接axios
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、请求数据方法

  • get请求:方式一:
    axios({
        // 默认请求方式为get
        method: 'get',
        url: 'api',
        // 传递参数
        params: {
            key: value
        },
        // 设置请求头信息
        headers: {
            key: value
        }
        responseType: 'json'
    }) then(response => {
        // 请求成功
        let res = response.data;
        console.log(res);
    }).catch(error => {
        // 请求失败,
        console.log(error);
    });
  • get请求:方式二
    axios.get("api", {
        // 传递参数
        params: {
            key: value
        },
        // 设置请求头信息,可以传递空值
        headers: {
            key: value
        }
    }) then(response => {
        // 请求成功
        let res = response.data;
        console.log(res);
    }).catch(error => {
        // 请求失败,
        console.log(error);
    });
  • post请求:方式一
    // 注:post请求方法有的要求参数格式为formdata格式,此时需要借助 Qs.stringify()方法将对象转换为字符串
    let obj = qs.stringify({
        key: value
    });
    
    axios({
        method: 'post',
        url: 'api',
        // 传递参数
        data: obj,
        // 设置请求头信息
        headers: {
            key: value
        }
        responseType: 'json'
    }) then(response => {
        // 请求成功
        let res = response.data;
        console.log(res);
    }).catch(error => {
        // 请求失败,
        console.log(error);
    });
  • post请求:方式二
    let data = {
            key: value
        },
        headers = {
            USERID: "",
            TOKEN: ""
        };
    // 若无headers信息时,可传空对象占用参数位置
    axios.post("api", qs.stringify(data), {
        headers
    }
    }) then(response => {
        // 请求成功
        let res = response.data;
        console.log(res);
    }).catch(error => {
        // 请求失败,
        console.log(error);
    });
  • Qs的使用
    • 引用cdn或者使用npmcnpm或者yarn进行插件安装
    • 使用cdn时,默认全局变量为Qs
    • Qs基本方法使用
      • qs.stringify() 方法:将目标数据转换为string字符串
      • qs.parse() 方法:将对象字符串格式的数据转换为对象格式

转载于:https://www.cnblogs.com/zxk5211/p/web_21.html

2018-12-19 11:27:03 Taurus_0811 阅读数 1971

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

优势:

从浏览器中创建XMLHttpRequests
从node.js创建http 请求
支持promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御 XSRF
在这里插入图片描述

安装步骤

npm install axios --save

引入

	//在main.js中全局引入
	import Axios from "axios"
	Vue.prototype.$axios = Axios

页面中如何使用

this.$axios.get(  )

全局配置

/*这里的Axios和上面引入时Vue.prototype.$axios = Axios 相同*/
Axios.defaults.baseURL = 'https://api.example.com';	 
//Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;  作者信息可不写
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

拦截器

//在请求或响应被 then 或 catch 处理前拦截它们。
//先在main.js引入	
import qs from "qs"  //处理请求的data
	// 添加请求拦截器
	axios.interceptors.request.use(function (config) {
	    // 在发送请求之前做些什么
	    if( config.method == "post" ){
	    	config.data = qs.stringify( config.data )
	    }
	    return config;
	  }, function (error) {
	    // 对请求错误做些什么
	    return Promise.reject(error);
	  });
	  
	// 添加响应拦截器
	axios.interceptors.response.use(function (response) {
	    // 对响应数据做点什么
	    if( response.status !== 200 ){   //如果响应不等于200,就不向下解析
	    	return;
	    }
	    return response;
	  }, function (error) {
	    // 对响应错误做点什么
	    return Promise.reject(error);
	  });
2019-08-27 18:56:15 Abudula__ 阅读数 120

在Jquery的年代,我们普遍用Ajax来请求,但在vue框架里,官方推荐用axios来发送请求。

1.第一步:安装axios

可以通过 npm或yarn来安装。

$ npm install axios
OR
$ yarn add axios

在vue 组件中使用axios

把axios引入到组件页面中

<script>
import axios from "axios";

export default {
 data() {
   return {};
 }
};
</script>

3.一般请求在生命周期mounted里使用

// Test.vue
<script>
import axios from "axios";

export default {
  data() {
    return {};
  },
  mounted() {
    axios.get("https://jsonplaceholder.typicode.com/todos/")
  }
};
</script>

4.用then方法来处理获取的数据

因为页面在请求有答复之前已经渲染,因此我们用promise来保证用请求获取的数据。

mounted() {
  axios.get("https://jsonplaceholder.typicode.com/todos/")
    .then(response => console.log(response))
}

然后就可以在then函数里使用请求回来的数据了。

5.错误处理

用catch方法来处理错误。

mounted() {
axios.get("https://jsonplaceholder.typicode.com/todos/")
  .then(response => console.log(response))
  .catch(err => {
     // Manage the state of the application if the request 
     // has failed      
   })
}
2019-07-19 19:44:12 weixin_40688217 阅读数 74

1.安装

使用npm全局安装axios

npm install axios 

使用 cnpm 安装 axios(建议)

cnpm install axios 

ps:当然,用其他包管理工具也不是不可以,比如yarn,若用yarn的话如果没记错现在用 yarn add axios


2.在main.js里import axios并将其挂载到Vue实例上(应该是main.js)

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

3.在入口文件中加入上述两行代码后,就可以在组件中使用

this.$axios.get('链接')
  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });
2019-10-28 18:11:58 Establish_bug 阅读数 40

axios的使用

小白第一次成功引用axios
输入命令安装axios:yarn add axios || npm install axios
成功后在package.json文件可看到 “axios”: “^0.19.0”,版本说明你已成功安装。
在新建文件夹utils里面新建request.js文件
代码:
import axios from ‘axios’
//自己的服务器
axios.defaults.baseURL = ‘https:…’;
axios.interceptors.request.use(function (config) {
// 请求前处理
return config;
}, function (error) {
// 错误处理
return Promise.reject(error);
});

// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});

export default axios;
图:
在这里插入图片描述
第二步
新建文件user.js
代码:
//引用上一个文件的方法
import request from ‘@/utils/request’;
export function requestGet(baseUrl, params) {
return request({
url: baseUrl,
method: ‘get’,
params:params
})
}
接下来就是怎么用接口获取数据
在你要用的vue页面写
//先引入方法
import { requestGet } from ‘@/utils/user’
//调用方法
requestGet(’接口url‘,{
’id‘:1,//你要传的数据
“rememberMe”:0
}).then(res => {
console.log(res)
})
在调试器可看到

打印出获得数据
在这里插入图片描述
新手上路有错误多多指教!

axios

阅读数 16

vue中引入axios

阅读数 2862

Axios

阅读数 19

没有更多推荐了,返回首页