vue axios使用

技术图片
技术图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> axios.get('http://localhost:3000/adata').then(function(ret){ // 注意data属性是固定的用法,用于获取后台的实际数据 // console.log(ret.data) console.log(ret) }) </script></body></html>

技术图片
技术图片
技术图片

技术图片
技术图片

技术图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> /* axios请求参数传递 */ // axios get请求传参 // axios.get('http://localhost:3000/axios?id=123').then(function(ret){ // console.log(ret.data) // }) // axios.get('http://localhost:3000/axios/123').then(function(ret){ // console.log(ret.data) // }) // axios.get('http://localhost:3000/axios', { // params: { // id: 789 // } // }).then(function(ret){ // console.log(ret.data) // }) // axios delete 请求传参 // axios.delete('http://localhost:3000/axios', { // params: { // id: 111 // } // }).then(function(ret){ // console.log(ret.data) // }) // axios.post('http://localhost:3000/axios', { // uname: 'lisi', // pwd: 123 // }).then(function(ret){ // console.log(ret.data) // }) // var params = new URLSearchParams(); // params.append('uname', 'zhangsan'); // params.append('pwd', '111'); // axios.post('http://localhost:3000/axios', params).then(function(ret){ // console.log(ret.data) // }) // axios put 请求传参 axios.put('http://localhost:3000/axios/123', { uname: 'lisi', pwd: 123 }).then(function(ret){ console.log(ret.data) }) </script></body></html>

技术图片
技术图片
技术图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> /* axios 响应结果与全局配置 */ // axios.get('http://localhost:3000/axios-json').then(function(ret){ // console.log(ret.data.uname) // }) // 配置请求的基准URL地址 axios.defaults.baseURL = 'http://localhost:3000/'; // 配置请求头信息 axios.defaults.headers['mytoken'] = 'hello'; axios.get('axios-json').then(function(ret){ console.log(ret.data.uname) }) </script></body></html>

技术图片
技术图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> /* axios拦截器 */ axios.interceptors.request.use(function(config) { console.log(config.url) config.headers.mytoken = 'nihao'; return config; }, function(err){ console.log(err) }) axios.interceptors.response.use(function(res) { // console.log(res) var data = res.data; return data; }, function(err){ console.log(err) }) axios.get('http://localhost:3000/adata').then(function(data){ console.log(data) }) </script></body></html>

技术图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> /* async/await 处理异步操作: async函数返回一个Promise实例对象 await后面可以直接跟一个 Promise实例对象 */ axios.defaults.baseURL = 'http:localhost:3000'; // axios.get('adata').then(function(ret){ // console.log(ret.data) // }) // async function queryData() { // var ret = await axios.get('adata'); // // console.log(ret.data) // return ret.data; // } async function queryData() { var ret = await new Promise(function(resolve, reject){ setTimeout(function(){ resolve('nihao') },1000); }) // console.log(ret.data) return ret; } queryData().then(function(data){ console.log(data) }) </script></body></html>

技术图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> /* async/await处理多个异步任务 */ axios.defaults.baseURL = 'http://localhost:3000'; async function queryData() { var info = await axios.get('async1'); var ret = await axios.get('async2?info=' + info.data); return ret.data; } queryData().then(function(data){ console.log(data) }) </script></body></html>

相关文章