axios使用

最新推荐文章于 2024-06-07 16:07:04 发布

前端逍遥子

最新推荐文章于 2024-06-07 16:07:04 发布

阅读量157

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_56230435/article/details/127719909

版权

语法

引入axioshtml环境用script+src引入cdn地址:
套用语法模板

axios({
  url: '请求url地址',
  method: '请求方式', // 默认"GET"方式
  params: { // 会携带在url?后面, 以key=value&key=value格式
    // query: 查询字符串
    // 携带查询参数带给后台
    后台要求的参数名: 前端传递的值,
    后台要求的参数名: 前端传值的值
  },
  data: { // 会携带在请求体(body)中带给后台(可在network调试工具里看到)
    后台要求的参数名: 前端传递的值,
    后台要求的参数名: 前端传递的值
  }
}).then(接收值变量名 => {
  // axios内部的原生Ajax请求成功后, 回传axios封装的结果对象到这回调函数
}).catch(接收值变量名 => {
  // axios内部的原生Ajax请求失败后, 回传结果到这个回调函数
})

例子

1.获取省份市区

 <script>
        axios({
            // 该地址 获取 省份下的城市列表
            url: 'http://ajax-api.itheima.net/api/area?pname=山东省&cname=济宁市',
            method: 'GET',
            // 参数：采取键值对的方式
            params: {
                // // 键值对
                // pname: '山东省',
                // cname: '济宁市'
            }
        }).then(result => {
            console.log(result)
        })
        console.log(decodeURI('%E7%9C%9F%E7%89%9B%E9%80%BC'))
        console.log(encodeURI('真牛逼'))
    </script>

2.增加图书

<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
    <script>
        // 利用
        axios({
            url: 'http://ajax-api.itheima.net/api/books',
            method: 'POST',
            data: {
                bookname: '道德经',
                author: '老子',
                publisher: '天道出版社'
            }
        }).then(res => {
            console.log(res)
        })
    </script>