master

分支 (1)

管理

管理

master

vue-learning-notes
/
axios请求.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>axios请求</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 引入 axios 包 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

  <div id="wzc">
    <ul v-for="lists in list">
      <b>{{ lists.id }}</b>
      <li>{{ lists.title }}</li>
    </ul>
  </div>

  <!--

    axios 请求方式

      一、 get请求方式 (查询数据)

        axios.get(url)
          .then( ({ data }) => {
            console.log(data)  // 直接获取后台的实际数据
          })
          //错误时执行
          .catch(error => {
            console.error('error，请求错误');
          });
        //.then() .catch() 方法使用基本一致

        //带参数的请求
          1.通过url传递
          axios.get(url ?= 参数)
            .then( ({ data }) => {
              console.log(data)  // 直接获取后台的实际数据
            })

          2.通过 params 选项传递
          axios.get(url, {
            params: {
              //参数
              id: 123
            }
          })
          .then(({ data }) => {
            console.log(data)  // 直接获取后台的实际数据
          })

      二、delete请求方式  用法与 get一致 (删除数据)
        axios.delete(url)
          .then( ({ data }) => {
            console.log(data)  // 直接获取后台的实际数据
          })

      三、 post请求方式 , 数据默认为json数据 (添加数据)
          axios.post(url, {
            //参数
            uname: 'lisi',
          }).then( ({ data }) => {
            console.log(data)  // 直接获取后台的实际数据
          })

        URLSearchParams 形式的传递参数 （application/x-www-form-urlencoded） --- 表单形式
          // 1.创建URLSearchParams
          const params = new URLSearchParams();
          //存放参数
          params.append('键', '值');
          axios.post('url', params)
            .then( ({ data }) => {
              console.log(data)  // 直接获取后台的实际数据
            })

      四、put请求和 post 一模一样  (修改数据)
          axios.put('url', {
            //参数
            uname: 'lisi',
          }).then( ({ data }) => {
            console.log(data)  // 直接获取后台的实际数据
          })

    配合async/await使用（简化）
      async 函数名() {
        const { data: res } = await axios.get('地址')
        console.log(res)
      }

    响应结果的主要参数
      data:       实际响应回来的数据
      headers：   响应信息
      status：    响应状态码
      statusText：响应状态信息

      //例子
      axios.get('url').then(ret => {
        console.log(ret);  // 所有api { ... }
        console.log(ret.data); //实际响应回来的数据  { ... }
        console.log(ret.headers); //响应信息  {content-type: "application/json; charset=utf-8"}
        console.log(ret.status);  //响应状态码  200
        console.log(ret.statusText); //响应状态信息 OK
      })

    全局配置
      1. 配置请求基准的url，调用的时候就可以简化了，只写路径
        axios.defaults.baseURL = 'http://localhost:3000/'; //地址都指向 http://localhost:3000/

      2. 配置请求头信息，必须后台有指定才可以使用，这样就有个mytoken 属性了
        axios.defaults.headers['mytoken'] = 'hello';

      3. 响应超时时间
          axios.defaults.timeout = 3000;

  -->

  <script>


    let wzc = new Vue({
      el: '#wzc',
      data: {
        list: []
      },
      created() {  // 数据初始后加载ajax
        this.getAllList();
      },
      methods: {
        async getAllList() {
          // 请求（get方式请求）
          // axios.get('http://www.liulongbin.top:3005/api/getnewslist')
          //   //正常时执行
          //   .then( ({ data }) => {
          //     console.log(data.message);
          //     this.list = data.message;
          //   })
          //   //错误时执行
          //   .catch(error => {
          //     console.error('error，请求错误');
          //   });

          const { data: res } = await axios.get('http://www.liulongbin.top:3005/api/getnewslist')
          console.log(res.message)
        }
      }

    });


  </script>

</body>
</html>