2021-07-27 axios的定义和基本用法_使用axios要定义吗-优快云博客

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/119136457

本文介绍了axios的基本用法，包括它的定义、特性、安装步骤。重点讲解了get和post请求的使用，以及axios响应结果的data、header、status和statusText属性。同时，还讨论了如何进行全局设置，如设置超时时间、默认地址和请求头信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

定义

axios是一个被vue 官方推荐的,基于promise的http库,用于浏览器和nodejs中

特性

支持nodejs,支持promise,可以拦截请求和响应,自动转换json数据

安装

使用npm:npm install axios
使用cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

get请求

// GET请求方式 
axios.get('/get_data?id=10010').then(ret => console.log(ret.data))
axios.get('/get_data',{ params: { id: 10010, name: 'zhangsan', age: 26 } }).then(ret=>console.log(ret.data))

post请求(默认发送json数据)

//POST请求方式 
axios.post('/set_data', { firstName: 'zhang', lastName: 'san' }).then(ret => { }) 
axios({ method: 'post', url: 'set_data', timeout: 1000, headers: {'X-Custom-Header': 'foobar'}, data: { firstName: 'zhang', lastName: 'san' } }).then(ret => { })

*还支持put请求和delete请求

axios响应结果的属性

data:实际响应的数据

header:响应头

status:响应状态码

statusText:响应状态信息

全局设置

1.axios.defaults.timeout = 3000【设置超时时间】
2.axios.defaults.baseURL = ‘http://localhost/app’【设置默认地址】
3.axios.defaults.headers[‘_token’] = ‘123123123’【设置请求头信息，通用头信息】
3.1…axios.defaults.headers.get[‘_token’] = ‘123123’
3.2.axios.defaults.headers.post[‘_token’] = ‘123123’
3.3.axios.defaults.headers.common[‘_token’] = ‘123123’【通用头信息，common可
以不写】

xhr例子

<!-- 以GET形式为例 -->
<body>
    <div id="app">
        <ul>
            <li :key='index' v-for='(el,index) in list'> {{el.area}}：{{el.counts}}所 </li>
        </ul>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            list: []
        },
        mounted() {
            const api = "https://api.i-lynn.cn/college"
            axios.get(api).then(ret => console.log(ret.data.list))
        }
    })
</script>

vue网页的axios的get请求示例2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  {{ info.data}}
</div>
<script type = "text/javascript">
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})
</script>
</body>
</html>