「Axios.jsでajaxするコードGETもPOSTも可能」の版間の差分

提供:sufeeWiki
ナビゲーションに移動 検索に移動
編集の要約なし
 
(同じ利用者による、間の5版が非表示)
3行目: 3行目:


== コード ==
== コード ==
* html
<syntaxhighlight lang="html">
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
</syntaxhighlight>
* javascript
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
async function ajax(url, json, method, error_method, http_method = "post") {
async function ajax(url, json, method, error_method, http_method = "post") {
42行目: 49行目:
   }
   }
}
}
</syntaxhighlight>
== 呼び出し方 ==
<syntaxhighlight lang="javascript">
const URL = " URL "
const JSON_DATA = {
hoge:"hogehoge"
}
const METHOD = response => {
  if(response.data.hoge !== undefined){
    console.log(response.data.hoge);
  }
}
const ERROR = error => {
  console.error(error);
}
ajax(URL , JSON_DATA , METHOD, ERROR, "post"); //post or get
</syntaxhighlight>
</syntaxhighlight>

2022年11月28日 (月) 14:38時点における最新版

概要

javascript で API通信を行うためのもの

コード

  • html
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
  • javascript
async function ajax(url, json, method, error_method, http_method = "post") {
    switch (http_method) {
        case "post":
            await axios
                .create({
                  xsrfHeaderName: 'X-CSRF-Token',
                  withCredentials: true,
                  headers: {
                    'Content-Type': "application/json"
                  }
                })
                .post(url, json)
                .then(response => {
                  method(response)
                })
                .catch(error => {
                  error_method(error)
                });
            break;
        case "get":
            await axios
                .create({
                  xsrfHeaderName: 'X-CSRF-Token',
                  withCredentials: true,
                  headers: {
                    'Content-Type': "application/json"
                  }
                })
                .get(url)
                .then(response => {
                  method(response)
                })
                .catch(error => {
                  error_method(error)
                });
            break;
  }
}

呼び出し方

const URL = " URL "
const JSON_DATA = {
hoge:"hogehoge"
}
const METHOD = response => {
  if(response.data.hoge !== undefined){
    console.log(response.data.hoge);
  }
}
const ERROR = error => {
  console.error(error);
}
ajax(URL , JSON_DATA , METHOD, ERROR, "post"); //post or get