Axios 비동기 요청 데이터 사용(코드 예)

이 글의 내용은 axios(코드 예제)에서 비동기 요청 데이터를 사용하는 방법에 대한 내용입니다. 참고할만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

Mock을 사용하여 백엔드 데이터를 시뮬레이션한 후 데이터 로드를 요청해야 합니다. 데이터 요청으로 Axios가 선택되었으며, 이제 Axios 사용을 권장합니다.

axios(https://github.com/axios/axios)는 다음을 기반으로 합니다. 약속을 위한 HTTP 라이브러리. 공식 웹사이트 문서에 소개된 대로 npm i 그런 다음 필요한 구성요소에 로드하면 됩니다. 개인적으로 코딩의 매력은 문제를 해결하는 방법이 여러 가지가 있다는 점이라고 생각합니다. 때로는 이 방법이 여러분의 개발 환경에서는 괜찮지만 제 개발 환경에서는 그렇지 않을 때가 있습니다. 따라서 다양한 문제가 있고, 해결 방법에 대해 질문합니다. 도 다양합니다.

axios 시작하기

1.

npm i axios -S

2. 소개

src 디렉토리에 새로운 apis.js 파일을 생성합니다. 물론 다른 사람들이 이해할 수 있도록 axios.js의 이름을 지정할 수도 있습니다.) 그리고 다음을 소개합니다.

import axios from 'axios';

그런 다음 apis.js 파일을 편집하고 axios.get을 캡슐화하거나 요청을 게시하는 것을 고려하세요

3. apis.js 파일

import axios from 'axios';
const Domain = "http://localhost:8080";  // 定义根域名
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 设置post默认的请求头

// 封装 post 请求
export function post(action, params){
  return new Promise((resolve, reject) => {
    // url 判断是测试环境 就要拿 测试环境的域名， 正式环境的就要用 正式域名
    let url = Domain + action;
    axios.post(url, params)
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  });
}

 // 封装 get 请求

export function get(action, params){
  return new Promise((resolve, reject) => {
    axios.get(Domain + action, params)
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  });
}

export default {
  postData(action, params){
    return post(action, params)
  },
  getData(action, params){
    return get(action, params)
  }
}

4. 필수 컴포넌트 참조

 import api from '../../apis.js';
 export default {
  name: "banner",
  data() {
    return {
      bannerList: []
    };
  },
  created(){
    this.getBanner(); // 在页面渲染完成即加载
  },
  methods: {
    getBanner(){
      this.$api.getData('/getBanner').then(val => {
        this.bannerList = val.imgs;
      });
    }
  }
}

5. axios의 글로벌 구성

많은 구성요소가 글로벌 구성 후에는 매번 가져오기가 번거롭습니다. 구성 요소에서 가져옵니다.

在入口文件main.js中引入，之后挂在vue的原型链上：

import api from './apis.js';
Vue.prototype.$http = api;

在组件中使用：

getBanner(){
    this.$http.getData('/getBanner').then(val => {
      this.bannerList = val.imgs;
    });
  }

6. Axios와 vuex 결합 (아직 프로젝트에 사용되지 않았는데 문제가 있으면 수정해주세요)

vuex Warehouse 파일 store.js를 참고하고 액션을 사용해 메소드를 추가하세요. 작업에는 비동기 작업이 포함될 수 있으며 작업을 통해 변형이 제출될 수 있습니다. 액션에는 고유한 매개변수 컨텍스트가 있지만 컨텍스트는 상태 및 getter를 포함한 상태의 상위입니다

import Vue from 'Vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)
export default new Vuex.Store({
 // 定义状态
  state: {
    banners: {
      name: 'pic'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    saveBanner (context) {
      axios({
        method: 'get',
        url: '/getBanner',
        data: context.state.banners
      })
    }
  }
})

구성요소에서 요청을 보낼 때 배포하려면 this.$store.dispatch를 사용해야 합니다

methods: {
  getBananer() {
  this.$store.dispatch('saveBanner')  // actions里的方法名
  }
}

여러 비동기 메서드 loading

1. $.ajax( url[, settings])

url: 매개변수는 요청이 전송되는 문자열 유형이어야 합니다(기본값은 현재 페이지 주소).
유형: 매개변수는 문자열 유형이어야 합니다. 요청 방법(post 또는 get)은 기본적으로 get입니다.
데이터: 서버로 전송할 데이터를 지정합니다.
async: 요청이 비동기적으로 처리되는지 여부를 나타내는 부울 값입니다. 기본값은 true입니다.
dataType: 서버에서 반환할 것으로 예상되는 데이터 유형인 문자열 유형이어야 하는 매개변수입니다.
contentType: 문자열 유형의 매개변수가 필요합니다. 서버에 정보를 보낼 때 콘텐츠 인코딩 유형은 기본적으로 "application/x-www-form-urlencoded"입니다.
성공: 매개변수는 함수형이어야 하며, 요청 성공 후 콜백 함수가 호출됩니다.
오류: 함수 유형의 매개변수, 요청 실패 후 호출되는 콜백 함수입니다.
jsonp: jsonp에서 콜백 함수의 문자열을 다시 작성합니다.

$(function(){
  $('#send').click(function(){
    $.ajax({
      type: "GET",
      url: "test.json",
      data: {username:$("#username").val(), content:$("#content").val()},
      dataType: "json",
      success: function(data){
        // handle success
      }
      error: function(data){
       // handle error
      }
      jsonp: ""
     });
   });
 });

2. $.ajax

의 도메인 간 요청 문제 Ajax가 요청한 URL이 로컬이 아니거나 동일한 서버의 주소가 아닌 경우 브라우저는 No 'Access-Control-Allow-Origin' 오류를 보고합니다. 요청한 리소스에 헤더가 있습니다. Origin... 브라우저의 보안 메커니즘으로 인해 다른 서버의 URL 주소를 호출할 수 없습니다. 이를 기반으로 jQuery.ajax는 jsonp 솔루션을 제공합니다. 서버에서 반환된 데이터 유형을 jsonp로 설정합니다.

 $(function(){
  $('#send').click(function(){
    $.ajax({
      type: "GET",
      url: "test.json",
      data: {username:$("#username").val(), content:$("#content").val()},
      dataType: "jsonp",   // jsonp格式
      success: function(data){
        // handle success
      }
      error: function(data){
       // handle error
      }
      jsonp: "callback"
     });
   });
 });

하지만 jsonp는 비공식 방식이고 이 방식은 get 요청만 지원하므로 post 요청만큼 안전하지 않습니다. 또한 jsonp를 사용하려면 서버의 협력이 필요하며 타사 서버에 액세스하고 서버를 수정할 권한이 없으면 이 방법이 불가능합니다.

3. vue 프레임워크의 vue-resource

ue-resource는 Vue.js용 플러그인으로 XMLHttpRequest 또는 JSONP를 통해 응답을 처리할 수 있습니다. vue-resource는 크기가 작고 주류 브라우저를 지원합니다. 그러나 vue는 2.0 이후에는 더 이상 업데이트되지 않습니다. You Dashen은 axios 사용을 권장합니다.

{
   // GET /someUrl
  this.$http.get('/someUrl').then(response => {
   // get body data
  this.someData = response.body;
 }, response => {
   // error callback
 });
}

4. vue-resource의 도메인 간 요청 문제

마찬가지로 브라우저의 보안 메커니즘으로 인해 vue-resource도 도메인 간 요청 문제에 직면합니다. 해결 방법은 다음과 같습니다. vue 프로젝트

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {    // 新增，解决跨域请求问题
      '/api': {
        target: 'http://192.168.1.103:8080/',
        changeOrigin: true,
        pathRewrite: {
          '`/api': '/'
        }
      },
      secure: false
    },
    
 target中写你想要请求数据的地址的域名

4 아래의 config/index.js 파일에서 프록시 테이블을 구성합니다. Axios 교차 도메인 요청

의 문제는 config/의 vue-resource와 동일합니다. vue 프로젝트 아래의 index.js 파일 프록시 ProxyTable은 내부에 구성됩니다:

 dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {    // 新增，解决跨域请求问题
      '/api': {
        target: 'http://192.168.1.103:8080/',
        changeOrigin: true,
        pathRewrite: {
          '`/api': '/'
        }
      },
      secure: false
    },

그러나 vue-resource 및 axios의 두 가지 방법을 사용하면 프록시 테이블이 구성될 수 있으며 문제는 계속 보고됩니다. No 'Access-Control -Allow-Origin' 헤더가 ...에 존재하며, 이를 위해서는 다음과 같은 최종 서버 협력 설정이 필요합니다:

 header("Access-Control-Allow-Origin", "*");
 header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

위 내용은 Axios 비동기 요청 데이터 사용(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!