ajax中 axios 的3种优化写法（前端）

本文介绍: 使用 axios的优化写法，使代码更高级且简洁。

没优化之前的写法：用axios发起ajax 请求

axios的使用

1.先引入 axios.js 文件到自己的网页中

a x ios.js 文件链接: http:// https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js

2.a x ios的使用语法：

axi os({
url: ‘请求的URL网址‘,
met h od: ‘请求的方法‘
}).t hen((结果变量名) => {
// .then 用来指定请求成功之后的回调函数
// 结果变量名中是请求成功之后的结果
})

代码如下：

 <!-- 引入自己相对路径的ajaxs.js --&gt;
<script src="./axios(1).js"&gt;</script&gt;

<script&gt;
         //发起请求
        axios({
            url: 'http://hmajax.itheima.net/api/area',
            method: 'GET',
            params: {
                pname: "青海省",
                cname: "西宁市"
            }
        }).then(res =&gt; {
            console.log(res);
        })
    </script&gt;

优化1： axi os 全局配置

axi os 全局配置

基地址：请求地址里面的前面相同的地址，称为基地址

axi os提供了一个全局的属性 default s.baseURL

语法: a x io s.default s.baseURL = ‘前缀基础地址‘ (简称基地址)

直接对a x io s本身进行设置

<script src="./axios(1).js"></script>
    <script>
         //前缀地址(基地址)
        axios.defaults.baseURL ='http://hmajax.itheima.net'
         //发起请求
        axios({
            url: '/api/area',
            method: 'GET',
            params: {
                pname: "青海省",
                cname: "西宁市"
            }
        }).then(res => {
            console.log(res);
        })
    </script>

优化2：默认的method

默认的method

ax ios请求时, method 选项, 内部默认用”GET”方式, 所以也可以省略不写

<script src="./axios(1).js"></script>
    <script>
         //前缀地址(基地址)
        axios.defaults.baseURL ='http://hmajax.itheima.net'
         //发起请求
        axios({
            url: '/api/area',
            params: {
                pname: "青海省",
                cname: "西宁市"
            }
        }).then(res => {
            console.log(res);
        })
    </script>

优化3：axios的快捷方法

axios的快捷方法

一些请求方式的方法可以直接使用例如语法为:

// 下面两种写法是等价的
axios({
  url: 'xx',
  method: 'POST',
  data: {
    a: 1
  }
})

axios.post('xx', {a:1} )


// 下面两种方式是等价的
axios({
  url: 'xx',
  method: 'get',
  params: {
    a: 1
  }
})

axios.get('xx', {params: {a:1} } )

实操例子如下：

    // 下面两种写法是等价的
  

    //第一种
    <script src="./axios(1).js"></script>
    <script>

         //前缀地址(基地址)
        axios.defaults.baseURL ='http://hmajax.itheima.net'

         //发起请求
        axios({
            url: '/api/area',
            method: 'GET',
            params: {
                pname: "青海省",
                cname: "西宁市"
            }
        }).then(res => {
            console.log(res);
        })

    </script>







    //第二种 （优化的写法）
    <script src="./axios(1).js"></script>
    <script>

        //前缀地址(基地址)
        axios.defaults.baseURL ='http://hmajax.itheima.net'

         //发起请求
        axios.get('/api/area', {params: { pname: "青海省", cname: "西宁市"} } )

     </script>