Vue中使用axios请求Ajax

最新推荐文章于 2022-06-29 22:25:34 发布

小楼昨夜那事

最新推荐文章于 2022-06-29 22:25:34 发布

阅读量235

点赞数 1

分类专栏： Vue框架 ajax 文章标签： vue

本文链接：https://blog.csdn.net/T_ambition/article/details/109059342

版权

Vue框架同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

Vue中使用axios请求Ajax

axios 是一个封装好的第三方ajax请求的库
特点：支持restfulapi
支持promise 解决回到地狱
支持ajax请求拦截

get请求

语法如下（不携带参数）

axios.get('http://xxxx.xxx.com?a=10&b=20').then(res=>{
  //成功回调
}).catch(err=>{
  // 失败回调
})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
  <script src="./axios.js"></script>
  <style>
    ul,li{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      
    }
    li{
      width: 25%;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul>
      <li
        v-for="(film,index) in films"
        :key="film.filmId"
      >
        <h3>{{film.name}}</h3>
        <p>
          导演：{{film.director}}
        </p>
        <img :src="film.poster" alt="">
      </li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      // 定义一个数据用来存储请求回来的数据
      films: [],
    },
    created () {
      this.axiosFilmData()
    },
    methods: {
      axiosFilmData () {
        axios.get('https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=9532407',{
          headers:{
              "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"160256909153244709568514"}',
              "X-Host": "mall.film-ticket.film.list"
          }
        }).then(res=>{
          this.films = res.data.data.films
          console.log(this.films);
        })
      }
    }
  })
</script>
</html>

携带参数

axios.get(url,{
  params:{ // get请求需要携带的数据 在真实请求时，会自动 放到地址栏后面
    a:10,
    b:20
  },
  headers: { // 在请求头中 加上若干参数...
  }
})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./axios.js"></script>
  <script src="../../vue.js"></script>
  <style>
    ul,li{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      
    }
    li{
      width: 25%;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul>
      <li
        v-for="(film,index) in films"
        :key="film.filmId"
      >
        <h3>{{film.name}}</h3>
        <p>
          导演：{{film.director}}
        </p>
        <img :src="film.poster" alt="">
      </li>
    </ul>
  </div>
</body>
<script>
  axios.defaults.baseURL = 'https://m.maizuo.com';
  const vm = new Vue({
    el: '#app',
    data: {
      films: [],
    },
    created () {
      this.axiosFilmData()
    },
    methods: {
      axiosFilmData () {
        // 定义一个请求函数
        axios.get('/gateway',{
          headers: {
            "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"160256909153244709568514"}',
            "X-Host": "mall.film-ticket.film.list"
          },
          params: {
            cityId:440300,
            pageNum:1,
            pageSize:12,
            type:1,
            k:9532407
          }
        }).then(res=>{
          // 将res中请求到的数据赋予到films中 
          if(res.data.status === 0){
            this.films = res.data.data.films
          }
        })
      }
    }
  })
</script>
</html>

POST请求

axios.post('/user', {  // 这个对象就是请求携带的数据 会自动挂载到请求体中
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    // 正确回调
    console.log(response);
  })
  .catch(function (error) {
    // 错误回调
    console.log(error);
  });

综合请求

axios({
  url:"xxx",
  method:"xxx",
  params:{},
  data:{

  },
  headers:{

  }
}).then(res=>{
  // 成功时回调
}).catch(res=>{
  // 失败时回调
})

实例请求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./axios.js"></script>
  <script src="../../vue.js"></script>
  <style>
    ul,li{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      
    }
    li{
      width: 25%;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul>
      <li
        v-for="(film,index) in films"
        :key="film.filmId"
      >
        <h3>{{film.name}}</h3>
        <p>
          导演：{{film.director}}
        </p>
        <img :src="film.poster" alt="">
      </li>
    </ul>
  </div>
</body>
<script>
  // 定义一个实例用于请求
  const request = axios.create({
    baseURL: "https://m.maizuo.com",
    timeout: 1000,
    headers: {
      "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"160256909153244709568514"}',
      "X-Host": "mall.film-ticket.film.list"
    }
  })
  const vm = new Vue({
    el: '#app',
    data: {
      films: []
    },
    created () {
      this.axiosFilmData()
    },
    methods: {
      axiosFilmData () {
        request.get('/gateway',{
          params: {
            cityId:440300,
            pageNum:1,
            pageSize:12,
            type:1,
            k:9532407
          }
        }).then(res => {
          if(res.data.status === 0){
            this.films = res.data.data.films
          }
          console.log(this.films);
        }).catch((err) => {
          
        });
      }
    }
  })
</script>
</html>

配置默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios的拦截器

您可以在处理请求或响应之前拦截它们，或者捕获它们。

// 添加一个axios 请求的拦截
axios.interceptors.request.use(function (config) {
    // 在发送之前可以在这里做某些事情
    // 如果你不rerturn config 请求时发送不出去的
    return config;
  }, function (error) {
    // 请求出错了 走这个拦截
    return Promise.reject(error);
  });

// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
    // http状态码 为2xx 会走这个响应成功的回调
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

如果您以后需要删除拦截器，您可以这样做。

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以向axios的自定义实例添加拦截器。

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

小楼昨夜那事

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中使用axios请求Ajax

Vue中使用aniox请求Ajaxaxios 是一个封装好的第三方ajax请求的库特点：支持restfulapi 支持promise 解决回到地狱支持ajax请求拦截get请求语法如下（不携带参数）axios.get('http://xxxx.xxx.com?a=10&b=20').then(res=>{ //成功回调}).catch(err=>{ // 失败回调})<...
复制链接

扫一扫